CSS如何實現圖片等比例縮放不變形（程式碼實例）-css教學-PHP中文網

CSS如何實現圖片等比例縮放不變形（程式碼實例）

yulia

發布： 2018-09-15 15:26:50

原創

18662 人瀏覽過

在工作中常常需要對圖片進行縮放，但有些縮放會讓圖片變形，所以今天就給大家介紹CSS如何實現圖片等比例縮放不變形，正在學習CSS的小伙伴趕緊過來看看吧！

下面一段程式碼介紹CSS實作圖片等比例縮小不變形，具體程式碼如下：

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

登入後複製

補充：CSS控制圖片大小不變形

方法一、(不錯，我正在用)

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

登入後複製

設定最大寬度是630px 如果大於630就把圖片寬度設定為630 高度就會隨著比例也會縮小不會造成圖片變形

#方法二

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);
}

登入後複製

方法三

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

登入後複製

max-width:600px; 在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>

登入後複製

總結：以上所述是小編給大家介紹的CSS實作圖片等比例縮小不變形的實例程式碼，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網路的支持！

以上是CSS如何實現圖片等比例縮放不變形（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！