如何在 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>

CSS:

CSS:

CSS:

CSS:

CSS:

CSS:CSS: 答案： 若要隨瀏覽器大小調整來啟用影像大小調整，請將以下屬性加入CSS 中：這可確保影像按比例縮放，並在調整瀏覽器視窗大小時自動調整到可用空間.附加說明：max-width: 100% 和height: auto 的組合允許圖像擴展到其最大寬度而不超過父元素的寬度，而保持它們的縱橫比。 width: auto9 hack 專門針對 IE8，否則在渲染影像時會忽略最大寬度。 因此，使用 新增的任何影像都會被忽略。標籤將是“靈活的”，根據瀏覽器大小的變化調整大小。 範例：請參考以下JSFiddle 範例進行工作示範：[JSFiddle 連結]此程式碼不需要JavaScript，並且與最新版本的程式碼不需要JavaScript Chrome、Firefox 和IE 相容。

以上是如何在 CSS 中使圖片隨著瀏覽器視窗的變化自動調整大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！