Question

任何人都可以帮我找到一种让2 DIV包含图像的方法。

目前，第二个div正在落后于第一个div，但我无法弄清楚如何根据手机和标签的屏幕尺寸改变尺寸。

这是我的代码：

＆＃13;

    .new_banner_homepage {
      width: 570px;
      float: left;
      min-height: 1px;
      margin-left: 30px;
      margin-bottom: 20px;
      border-radius: 5px;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
      transition: all 0.2s linear 0s;
      transition-property: all;
      transition-duration: 0.2s;
      transition-timing-function: linear;
      transition-delay: 0s;
    }
    @media only screen and (max-width: 239px) {
      .new_banner_homepage {
        width: 90%;
      }
    }

＆＃13;

<div class="new_banner_homepage">
  <a href="#">
    <img data-retina="true" src="http://placehold.it/570x150" alt="">
  </a>
</div>
<div class="new_banner_homepage">
  <a href="#">
    <img data-retina="true" src="http://placehold.it/570x150" alt="">
  </a>
</div>

＆＃13;

Answer 1

要使div响应，您需要使用百分比作为宽度。使用像素是固定宽度，将在任何设备上持久存在。百分比是相对的，并且将增长或缩小到相对于屏幕大小设置的百分比。即，25％的台式机显示器将超过智能手机的25％。

您将遇到的问题是当div减小时如何减小图像的大小，因为图像的大小是固定的，而div现在是百分比。

为了解决这个问题，您可以将以下内容与图像本身中设置的图像尺寸一起使用。

img {
    width: 100%;
    height: auto;
}

您还需要确保在头标中使用了与此类似的内容。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

您是否在html页面中添加了meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

感谢所有回复，

1）我尝试修改.new_banner_homepage {width：570px}并替换为width：25％;

它只是将我的图像的大小减小到destokp中的小而且在设备模式下非常小。 2）我有效地：在我的头上。

我忘记了一些信息，可能是因为我使用了购买的模板......：完整代码：

<div class="container">

 <div class="new_banner_homepage"><a href="#"><img  data-retina="true" src="{{media url='wysiwyg/img1.png'}}" alt=""></a> </div>
 <div class="new_banner_homepage"><a href="#"><img  data-retina="true" src="{{media url='wysiwyg/img2.png'}}" alt=""></a> </div>


</div>

和css：

.container{

width: 1170px;
margin-right: auto;
margin-left: auto;
}

.new_banner_homepage{
width: 25%;
float: left;
min-height: 1px;
margin-left: 30px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
transition: all 0.2s linear 0s;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
}

@media only screen and (max-width: 25%){
    .new_banner_homepage{ width: 25%; }

}

THX

用html和css中的图片响应构建2 div

3 个答案: