CSS를 사용하여 변형 없이 이미지의 비례적인 크기 조정을 달성하는 방법(코드 예)

직장에서 이미지 크기를 조정해야 하는 경우가 많지만 일부 크기 조정으로 인해 이미지가 변형될 수 있으므로 오늘은 여러분께 소개하겠습니다. CSS를 사용하여 이미지를 변형하지 않고 비례적인 크기 조정하는 방법 CSS를 배우고 있는 친구들은 꼭 한 번 받아보세요. 바라보다!

다음 코드는 CSS를 사용하여 변형 없이 이미지 크기를 줄이는 방법을 소개합니다. 구체적인 코드는 다음과 같습니다.

<img src="../images/bg1.jpg" alt="" />
      img {
           /*等宽缩小不变形*/
           /*width: 100%;*/
           /*二选一*/
           /*等高缩小不变形*/
           height: 100%;
       }

보충: CSS는 변형 없이 이미지 크기를 제어합니다.

방법 1. (예 , 사용 중입니다)

img {max-width:630px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}

최대 너비를 630px로 설정하세요. 630보다 큰 경우 이미지 너비를 630으로 설정하세요. 높이는 비율에 따라 줄어들어 이미지가 변형되지 않습니다.

방법 2

img,a img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:e-xpression(this.width>590?"590px":this.width);
max-height:590px;
height:e-xpression(this.height>590?"590px":this.height);
}

방법 3

div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?”600px”:”auto”);
overflow:hidden;
}

max-width: 600px; in IE7, FF 및 기타 IE가 아닌 브라우저에서 최대 너비는 600px입니다. 하지만 IE6에서는 작동하지 않습니다.

width:600px; 모든 브라우저에서 이미지 크기는 600px입니다.

이미지 크기가 600px보다 크면 자동으로 600px로 줄어듭니다. IE6에서 유효합니다.

overflow:hidden; 이미지 크기 조절 실패로 인한 늘어나거나 변형되는 것을 방지하기 위해 남는 부분을 숨깁니다.

4. 이미지의 높이와 너비가 특정 고정 값을 초과하지 않도록 설정하려면 이미지의 높이나 너비가 이 값을 초과할 때 이미지 크기를 이 크기로 줄여야 합니다.

(1) Firefox 또는 IE7 이상과 같은 최신 브라우저의 경우 max-width 및 max-height의 두 가지 CSS 속성을 사용하세요.

(2) IE 6.0 이하에서는 위의 두 CSS 속성이 무시되지 않습니다. 이전에는 이러한 문제를 해결하기 위해 Javascript를 사용한 다음 이미지에 onload 이벤트를 추가하는 경우가 많았습니다. 예:

<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<script type="text/javascript">
　　functionresizeImage(obj){
　　obj.width=obj.width>50&&obj.width>obj.height?50:auto;
　　obj.height=obj.height>50?50:auto;
　　}
</script>

요약: 위 내용은 변형 없이 동일한 비율의 이미지를 얻기 위해 편집자가 소개하는 예제 코드입니다. 궁금한 사항이 있으면 남겨주세요. 메시지를 보내면 편집자가 모든 사람에게 즉시 답변을 드릴 것입니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

위 내용은 CSS를 사용하여 변형 없이 이미지의 비례적인 크기 조정을 달성하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!