调整上面的图片,如下图所示

时间:2017-10-31 22:33:25

标签: html css

我让我的网站响应,它会在所有设备上都很好看。我有这个图像,如果必须缩小。但是,它上面的图像是它的信息并不是。所有浏览器尺寸的尺寸都相同。此外,当浏览器减少时,上面的图像移出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;}

1 个答案:

答案 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>