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

有谁能帮我找到一种方法，使包含图像的2

DIV

s响应

目前，第二个div要比第一个div大，但我不知道如何让它们随着手机和标签的屏幕大小而改变大小

这是我的代码：

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

.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%; }

。新建条幅网页{
宽度：570px；
浮动：左；
最小高度：1px；
左边距：30px；
边缘底部：20px；
边界半径：5px；
盒影：0px 0px 6px rgba（0,0,0,0.3）；
过渡：所有0.2s线性0；
过渡性质：全部；
过渡时间：0.2s；
过渡时间函数：线性；
转换延迟：0s；
}
@仅介质屏幕和（最大宽度：239px）{
.新网页{
宽度：90%；
}
}

---

您是否在html页面中添加了

元标记

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

---

要使div响应，需要使用宽度百分比。使用像素是一个固定的宽度，将在任何设备上保持不变。百分比是相对的，并且将增长或收缩到相对于屏幕大小设置的百分比。也就是说，25%的桌面显示器将超过25%的智能手机

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

为了解决这个问题，您可以使用以下在图像本身中设置的图像尺寸

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

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

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

谢谢您的回复

1） 我试着修改新的横幅主页{width:570px}并替换为width:25%

它只是将我的图像在Destock模式下缩小，在设备模式下缩小。 2） 我得到了有效的：在我的头标签

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

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

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

.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

删除

。新的_banner_主页{宽度：570px}

并替换为

宽度：25%您遇到的问题到底是什么？您的媒体查询是否不起作用？对于较小尺寸，您希望得到什么结果？@benny117请使用
@media
标签。在这里阅读文章：使用@Spnkmyr advices并在
中添加一个百分比宽度。新的\u banner\u主页
，即
40%
。您应该将
px
大小更改为百分比或em，以使其完全响应。如果您将
marginleft=30px
设置为所有屏幕上的
30px
，在桌面上可能没有问题，但对于移动设备来说太多了。