我让我的网站响应,它会在所有设备上都很好看。我有这个图像,如果必须缩小。但是,它上面的图像是它的信息并不是。所有浏览器尺寸的尺寸都相同。此外,当浏览器减少时,上面的图像移出div容器熊。
HTML:
<div id="bears">
<img src="./pics/bearone.jpg">
<div id="text">
<img src="./pics/bearinfo.png">
</div>
</div>
CSS:
#bears img {
width: 100%;
height: 100%;
display:block;
}
#bears{
margin-top: -40px;
width:100%;
height:100%;
position: relative;
}
#text { float: right; margin-right: 750px; }
#text img { max-width: 50%; height: auto; margin-top: -55%; position: absolute;}
答案 0 :(得分:-1)
设置图像的高度和宽度。和图像标记的css样式规则(或为其添加一个类)。
<div id="bears">
<img src="bearimage.jpg" width="200px" height="10px">
<div id="text">
<img src="bearimagetextimage.jpg" width="200px" height="10px">
</div>
</div>
<style> img { height:auto;width:100%} </style>