Question

我使我的网站响应，在所有设备上看起来都不错。但是，每当我尝试缩小Web浏览器的大小时。图像下方的上图显示了div。尝试溢出：隐藏在div但它没有显示图像。看到jsfiddle并调整方框的大小，你会看到它超出了div。

#deets img {
  width: 100%;
  height: 100%;
  display: block;
}

#deets {
  margin-top: -40px;
  width: 100%;
  height: 100%;
  position: relative;
}

#text { 
  margin-left: 250px; 
}

#text img { 
  margin-top: -55%; 
  position: absolute;
  min-width: 100px;
  max-width: 50%; 
}

<div id="deets">
  <img src="http://lorempixel.com/output/technics-q-c-640-480-1.jpg">
  <div id="text">
    <img src="http://lorempixel.com/output/abstract-q-c-640-480-6.jpg">
  </div>
</div>

Answer 1

您希望将overflow: hidden;添加到#deets div。

#deets {
  margin-top: -40px;
  width:100%;
  height:100%;
  position: relative;
  /* add this if you want to stop it running out of the containing div */
  overflow: hidden;
}

或者，如果您想让两张图片完整显示，则您需要更改#text CSS

#text  {     
  /* margin-left: 250px;  */
  margin-left: 20%;
}

如果它必须是左侧250px，您将要添加媒体查询并以较低的屏幕宽度为目标。

@media (max-width:480px) {
  ...
}

Answer 2

这是因为您在margin-left: 250px上设置了#text。 px单位是固定的，在这种情况下使用%之类的相对单位代替：

＆＃13;

#deets img {
  width: 100%;
  height: 100%;
  display: block;
}

#deets {
  margin-top: -40px;
  width: 100%;
  height: 100%;
  position: relative;
}

#text {
  margin-left: 25%; /* modified */
  /* display: flex; better way to horizontally center the content */
  /* justify-content: center; comment out the margin-left above if you want to use these two lines */
}

#text img {
  display: block;
  margin-top: -55%; 
  position: absolute;
  min-width: 100px;
  max-width: 50%; 
}

＆＃13;

<div id="deets">
  <img src="http://lorempixel.com/output/technics-q-c-640-480-1.jpg">
  <div id="text">
    <img src="http://lorempixel.com/output/abstract-q-c-640-480-6.jpg">
  </div>
</div>

＆＃13;

上图继续走出div

2 个答案: