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

最大幅を 630 ピクセルに設定します。それが 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 ; 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 以前の場合、上記の 2 つの 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 中国語 Web サイトをサポートしていただきありがとうございます。

以上がCSS を使用して画像を変形せずに比例拡大縮小する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。