CSS의 브라우저 창 변경에 따라 이미지 크기를 자동으로 조정하는 방법은 무엇입니까?

CSS를 사용하여 브라우저 크기에 따라 이미지 크기를 자동으로 조정

질문: 브라우저 크기를 조정할 때 이미지 크기도 자동으로 조정하고 싶습니다. 창문. 그러나 아래 코드는 작동하지 않습니다.

HTML:

<code class="html"><img src="/static/imghwm/default1.png" data-src="img/icon_contact.png" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="img/icon_links.png" class="lazy" alt=""></code>

CSS:

<code class="css">img {
    max-width: 100%;
    height: auto;
}</code>

답변: 브라우저 크기 조정으로 이미지 크기 조정을 활성화하려면 CSS에 다음 속성을 추가하세요.

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* for IE8 */
}</code>

이렇게 하면 이미지 크기가 비례적으로 조정되고 브라우저 창 크기가 조정될 때 사용 가능한 공간에 자동으로 조정됩니다. .

추가 설명:

max-width: 100% 및 height: auto의 조합을 사용하면 이미지가 상위 요소의 너비를 초과하지 않고 최대 너비로 확장될 수 있습니다. 종횡비를 유지합니다. width: auto9 해킹은 특히 IE8을 대상으로 하며 그렇지 않으면 이미지 렌더링 시 최대 너비를 무시합니다.

결과적으로 태그는 "유연"하며 브라우저 크기 변경에 따라 크기가 조정됩니다.

예:

작업 데모는 다음 JSFiddle 예를 참조하세요. [JSFiddle Link]

이 코드는 JavaScript가 필요하지 않으며 최신 버전의 Chrome, Firefox, IE와 호환됩니다.

위 내용은 CSS의 브라우저 창 변경에 따라 이미지 크기를 자동으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!