css - 带有响应图像的 2 列 CSS 响应布局

Question

我浏览了尽可能多的关于这个主题的帖子，但没有一个能解决这个难题。是否可以让左列包含文本，右列包含图像，当调整大小时，图像会自动调整大小并流入单个列？

在 img 上使用 100% 的最大宽度将使图像响应并自动调整大小。但是，自动调整大小不适用于表格或将百分比或 float 应用于其周围的 div。因此，任何包含 float 或图像百分比的 CSS 2 列布局都会使图像大小调整失败。

除了使用网格，还有人对此有解决方案吗？

Answer 1

如果您 float 图像的父 div，它不应该影响图像的响应宽度。

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

Demo