带有响应式图片的2列CSS响应式布局

Question

带有响应式图片的2列CSS响应式布局

cssresponsive-design

9

我查阅了许多关于这个话题的帖子，但是没有一个能够解决这个难题。是否有可能拥有一个左侧带文本的列和右侧带图片的列，并且在调整大小时流动到单列中，同时带有自动调整大小的图片？

使用max-width为100% on img将使图像具有响应性和自动调整大小。但是，在表格中或者对其周围的div应用了百分比或浮动后，自动调整大小就不起作用了。因此，任何包含浮动或百分比到图像的CSS 2列布局都会破坏图像的调整大小。

除了使用网格之外，有没有其他解决方案？

- Charles

创建一个 JSFiddle，我会向你展示如何操作。 - Romain

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 3dgoo · Accepted Answer

如果您让图像的父元素浮动，它不应该影响图像的响应式宽度。 HTML

<div class="group">
    <div class="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corporis voluptates repellat ullam labore qui voluptatum error nesciunt ratione dolorem fugiat veritatis ipsum nobis eius dicta est obcaecati ab animi illum molestias accusamus cum laboriosam magni recusandae earum unde fuga deserunt laudantium facere ducimus rerum tempora pariatur consectetur iste nulla a aut ea sit nam autem doloremque iusto exercitationem voluptatem facilis eos quasi. Mollitia sequi assumenda corrupti repellendus ex amet reprehenderit animi illum ducimus totam unde quia distinctio quam velit magnam. Voluptatibus dolores natus sint enim fugiat. Sapiente voluptates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p>
    </div>
    <div class="right">
        <img src="http://lorempixel.com/640/480/" alt="" />
    </div>
</div>

CSS

：层叠样式表。

.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .left, 
    .right {
        float: none;
        width: auto;
    }
}

演示