我试图让一些图像响应,但每次都失败。
这是我的html代码
<div class="wrapper">
<div class="inner">
<div style="margin-top:30px;"><img src="nature/logo.png"></div>
<div id="content">
<div class="socials">
</div>
<div class="nature">
<ul class="reset">
<li><a href="#"><img src="nature/img7.png"alt="" /></a></li>
<li> <a onClick="javascript:sendpage();" style="cursor:pointer;"><img src="nature/img2.png"alt="" /></a></li>
<li><a href="#"><img src="nature/mg3.png"alt="" /></a></li>
<li><a href="#"><img src="nature/img4.png"alt="" /></a></li>
<li><a href="#"><img src="nature/img5.png"alt="" /></a></li>
<li><a href="#"><img src="nature/img6.png"alt="" /></a></li>
<li><a href="#"><img src="nature/img4.png"alt="" /></a></li>
</ul>
</div>
</div>
</div>
</div>
以及此 css 文件之后的内容
.nature {
display:block;
width:150px;
height:150px;
background:url(../nature/img1.png) no-repeat;
cursor:pointer;
position:relative;
}
.socials, .nature {
margin:0 auto;
}
.socials {
margin-bottom:50px;
}
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
}
ul.reset li {
position:absolute;
}
ul.reset li a {
outline:none;
}
我已经尝试将所有 px 更改为百分位数,还尝试添加一些媒体查询但没有任何反应,我找不到问题
任何建议都会对我的学习体验有很大帮助。
最佳答案
为了制作响应式图像,将它们的宽度设置为 100%,以便它们继承容器的宽度。还要设置最小和最大宽度以提供一些边界。 还将高度设置为自动。
此处示例:http://jsfiddle.net/vU9G4/5/
<div class="nature">
<ul class="reset">
<li><a href="#"><img src="http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg" alt="" /></a></li>
</ul>
</div>
CSS:
*{
margin:0px;
padding:0px;
}
.nature {
width:100%
background:#000;
cursor:pointer;
position:relative;
}
ul.reset li {
list-style:none;
position:absolute;
}
ul.reset li a {
outline:none;
}
ul.reset li a img{
min-width:240px;
width:100%;
height:auto
}
关于html - 响应式不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19006169/