<div>標簽和<img>標簽是HTML中常用的元素之一。當<div>和<img>標簽結(jié)合使用時，可以實現(xiàn)圖片全屏的效果。通過給<div>標簽設(shè)置適當?shù)臉邮綄傩裕沟?lt;img>標簽的大小和<div>標簽的大小相等，并且<img>標簽完全覆蓋<div>標簽的內(nèi)容。接下來將通過幾個代碼案例詳細解釋說明如何實現(xiàn)圖片全屏的效果。
代碼案例一：
代碼案例二：html
代碼案例一：
html
<p>實現(xiàn)方式一：</p>
<pre>
<!DOCTYPE html>
<html>
<head>
<style>
.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
overflow: hidden;
margin: 0;
padding: 0;
}
<br>
.fullscreen img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="fullscreen">
<img src="example.jpg" alt="全屏圖片">
</div>
</body>
</html>在上述代碼中，給<div>標簽添加一個名為"fullscreen"的類。接著，在CSS樣式中，通過設(shè)置該類的樣式屬性，實現(xiàn)了使<div>標簽占據(jù)整個窗口的效果。 然后，通過設(shè)置該類下的<img>標簽的樣式，使圖片完全覆蓋<div>標簽，并且使用"object-fit: cover;"屬性保持圖片的縱橫比例，確保圖片完全填滿<div>標簽。
代碼案例二：html
實現(xiàn)方式二：
<!DOCTYPE html>
<html>
<head>
<style>
.fullscreen {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9的寬高比例 */
overflow: hidden;
}
<br>
.fullscreen img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="fullscreen">
<img src="example.jpg" alt="全屏圖片">
</div>
</body>
</html>在上述代碼中，給<div>標簽添加一個名為"fullscreen"的類，同樣通過設(shè)置該類的樣式屬性，實現(xiàn)了使<div>標簽占據(jù)整個窗口的效果。 通過設(shè)置padding-bottom的百分比值為16:9的寬高比例，即可以保持圖片的縱橫比，確保圖片完全填滿<div>標簽。
來說，通過<div>和<img>標簽的結(jié)合應(yīng)用，可以實現(xiàn)圖片全屏的效果。只需設(shè)置合適的樣式屬性，可以輕松實現(xiàn)圖片的全屏展示。以上是關(guān)于"div img 全屏"的說明，希望對你有所幫助。
下一篇div o 隱藏