css讓圖片自適應(yīng)屏幕大小的方法

發(fā)布時間：2020-11-12 09:52:18 來源：億速云閱讀：1129 作者：小新欄目：web開發(fā)

這篇文章主要介紹了css讓圖片自適應(yīng)屏幕大小的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

css讓圖片自適應(yīng)屏幕大小的方法：在css文件中加入代碼【img {height: auto; width: auto\9; width:100%;}】即可。如果我們只想更改特定的圖片，那么可以使用方法【height: auto;】。

如果想讓圖片自適應(yīng)屏幕的大小，那么在css代碼里加入如下代碼即可

（學(xué)習(xí)視頻分享：java視頻教程）

img {height: auto; width: auto\9; width:100%;}

用max-width設(shè)置，如果圖片尺寸大于當(dāng)前瀏覽器尺寸就自動縮放，圖片的高度設(shè)置正比縮放。

height:auto，相關(guān)元素的高度取決于瀏覽器。

代碼如下：

<img src="..." class="img-responsive" alt="響應(yīng)式圖像">

如果只想改特定的圖片

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css讓圖片自適應(yīng)屏幕大小的方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

猜你喜歡