我的 slider 中有一些图像,我试图阻止它们在我调整浏览器大小时自动按相同比例调整大小。我想要实现的是图像保持相同的高度和略微不同的宽度,直到浏览器通过@media 查询达到断点。
正是http://www.worldwildlife.org/调整浏览器大小时使用其 slider 实现。
这是我的 HTML:
<div id="content">
<ul class="rslides" id="slider1">
<li><img src="../Img/001.jpg" alt="foto" /></li>
<li><img src="../Img/002.jpg" alt="foto2"/></li>
<li><img src="../Img/003.jpg" alt="foto3"/></li>
</ul>
</div>
和 CSS:
#fondo3 {
background-color: black;
position: absolute;
right: 0;
left:0;
top:10%;
margin: 0;
z-index: 10;
width:auto;
}
.rslides {
min-width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
最佳答案
您需要使用 css 媒体查询并像这样在 x 宽度位调整 img 的大小
@media screen and (max-width: 800px) {
img {
width:300px
}
}
@media screen and (max-width:1200px) {
img {
width:600px
}
}
这是一个指向 css 的链接由网站搜索@media 使用
关于html - 如何防止 img 在 div 中调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30009075/