具有響應式圖像的2列CSS響應式佈局

Question

我已經瀏覽了很多關於此主題的帖子，我可以找到它們，但是他們都沒有解決這個難題。有沒有可能有一個左列與文本和一個右列與圖像，將調整大小時，一個自動調整大小的圖像將流入單個列？

在img上使用100％的最大寬度將使圖像響應並自動調整大小。但是，自動調整大小不適用於表格中，或者在其周圍應用了百分比或浮點數。因此，任何包含浮點數或圖像百分比的CSS 2列布局都會打敗圖像大小調整。

除了使用網格，有沒有人有這個解決方案？

Answer 1

如果您浮動圖像的父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