반응 형 이미지

반응 형 이미지는 화면 크기에 맞게 자동으로 조절됩니다.

효과를 보려면 브라우저 창 크기를 조정하십시오.

원래 크기보다 커야하지만 확대되지 않은 이미지의 크기를 줄이려면 다음을 추가하십시오.

예

img {

    max-width: 100%;

    height: auto;

}

[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

img {

    max-width: 100%;

    height: auto;

}

</style>

</head>

<body>

<h2>Responsive Images</h2>

<p>Responsive images will automatically adjust to fit the size of the screen.</p>

<p>Resize the browser window to see the effect:</p>

<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">

</body>

</html>