我有3個圖像以及如何縮放此圖像比縮小瀏覽器的大小。如何使圖像變小使我的瀏覽器更小? 我嘗試這一點,但它不工作:如何用css縮放圖像
HTML
<div class="main">
<div class="submain">
<div class="iner">
<img src="img/sample1.png" alt="" />
</div>
<div class="iner1">
<img src="img/sample2.png" alt="" />
</div>
<div class="iner2">
<img src="img/sample3.png" alt="" />
</div>
</div>
</div>
CSS
.main{
position:relative;
height: 500px;
width: 1000px;
background-color: #111210;
}
.iner img{
position: absolute;
width: 600px;
height: 350px;
background-color: #34cb2f;
bottom: 0;
left:50%;
z-index: 5;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
}
.iner1 img{
position: absolute;
width: 600px;
height: 270px;
background-color: #34cb2f;
bottom: 0;
right: 5%;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
}
.iner2 img{
position: absolute;
width: 600px;
height: 270px;
background-color: #34cb2f;
bottom: 0;
left: 65%;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
}
.submain{
width: 800px;
height: 200px;
background-color: rgba(38, 118, 212, 0.51);
}
這是大規模圖像時,最小寬度小於400像素:
@media screen and (min-width: 400px) {
.submain{
width: 75%;
}
}
但是這個媒體規則不起作用,也許我做錯了什麼,請幫我理解。謝謝!
'分鐘-width'裝置的最小寬度,該查詢生效,即超過一定寬度。對於小於400像素,您需要'最大寬度',該值在最大寬度值以下生效。 –