2个不同宽度（40％/ 60％）的并排全宽度div标签，缩小到100％宽度并最终堆叠在一起

我一直在尝试并未能获得以下功能。2个不同宽度（40％/ 60％）的并排全宽度div标签，缩小到100％宽度并最终堆叠在一起

我有2个div标签，每个标签都包含一个图像。左边的Div A包含一个原始大小为768 x 400的图像，右边的Div B的大小为1152 x 400.因此，这些图像代表40％宽度和60％宽度。

我正在寻找这些占据屏幕的整个宽度，并让它们按比例缩小（仍然是40％和60％并排）到一个点，并最终以100％满的方式堆叠在一起宽度（例如在720像素以下的任何分辨率下），但仍然尊重其原始高宽比。因此，Div B中的图像实际上比Div A更短。

我试图用附加的图像来说明这一点。

任何援助将不胜感激。

感谢，

https://s13.postimg.org/qq94pfq3b/2_divs.png

来源

2017-02-17 user1154955

您可以使用CSS媒体查询 – Uday

好像你正在寻找某人为你做这个。这是非常微不足道的东西，你试过用google搜索这个，或者在这里寻找答案？ –

你能提供一些你的代码吗？ – Armin

这样的事情应该工作。请注意，将这些图像堆叠在一起的断点位于767px，这是移动CSS应该启动的标准分辨率。

HTML：

<div class="a"> 
    <img src="image1.png"> 
</div> 
<div class="b"> 
    <img src="image2.png"> 
</div>

CSS：

.a, .b { float: left; } 
.a img, .b img { width: 100%; } 
.a { width: 40%; } 
.b { width: 60%; } 

@media screen and (max-width: 767px) { 
    .a, .b { width: 100%; } 
}

编辑：

我刚才注意到您的图片不具有相同的比例。你如何期待他们按照你设想的方式并排，尊重他们的本地比例，而不是比另一个更高？

来源

2017-02-17 14:36:38

谢谢！这工作完美！缩小比例仍能正常工作，并且图像保持其纵横比（并具有相同的高度）。您可以在我链接的图像的“小型桌面分辨率”1280像素宽部分中看到此内容。 – user1154955

你可以用bootstrap来完成。这里有一个小片段，它可以帮助你：

.a { 
 
    background-color: blue; 
 
    height: 100px; 
 
} 
 

 
.b { 
 
    background-color: red; 
 
    height: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="a col-xs-12 col-sm-5"></div> 
 
<div class="b col-xs-12 col-sm-7"></div>

来源

2017-02-17 14:40:04 Arkej

2个不同宽度（40％/ 60％）的并排全宽度div标签，缩小到100％宽度并最终堆叠在一起

回答

相关问题