資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會科學
時尚研究
法律研究如何使用 CSS 自動調整圖片大小以適合 div 容器？
在網頁中，如果你想自動調整圖片大小以適合 div，你需要圍繞高度、寬度、最大寬度和最大高度屬性。要自動調整圖片大小以適合 div 容器，我們在 img 標記上設定了以下 CSS 屬性 -
max-width: 100%; max-height: 100%;
設定圖片
首先，我們在 div mydiv 中使用 img 標記設定了一張圖片 -
<div id="myDiv"> <img src="https://tutorialspoint.tw/behave/images/behave.jpg"> </div>
調整容器高度和寬度
我們已經將 mydiv 的高度和寬度設定為 auto，以允許自動調整大小的 div。如果 高度：auto；元素將自動調整其高度以正確顯示其內容，如下所示 -
#myDiv {
height: auto;
width: auto;
border: 2px solid blue;
}
調整容器內的圖片
現在，我們已經在 divv 中設定了圖片，並使用以下 CSS 屬性 max-width 和 max-height 來允許自動調整大小，而不會有任何問題 -
#myDiv img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
示例
現在，讓我們看一個使用 CSS 自動調整影像大小以適合 div 容器的示例 -
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
height: auto;
width: auto;
border: 2px solid blue;
}
#myDiv img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="https://tutorialspoint.tw/behave/images/behave.jpg">
</div>
</body>
</html>
更新日期： 2023 年 11 月 16 日
3 千 + 瀏覽量
廣告