圍圖像容器

Question

想象一下下面的代碼...

<div style="border: 1px solid #000;"><img src="/images/me.png" style="float: right;"><!--100X250px--> How are you?</div> 

或者這...

<li style="border: 1px solid #000;"><img src="/images/me.png" style="float: right;"><!--100X250px--> How are you?</li> 

如果這些容器中包含的文本只，你會看到一個非常纖細的黑盒子（也許包含文字的25-50像素高）。事實上，這正是我所看到的 - 除了在容器上方或下方延伸的圖像。

我知道如何調節圖像寬度，但我該如何處理高度？我想有兩種選擇：1）使每個圖像適應其容器，或2）使容器高度適應圖像。我認爲第二個選項聽起來更好。另外，我應該指出，每個容器包含的文本數量都在地圖上;有些可能包含幾段。

編輯：

對不起，我離開了的一個重要信息。大多數這些圖像都是浮在文本的右側或左側。因此，我不希望圖像跨越容器的寬度。我寧願以某種方式使容器更高，因此圖像不會突出。

無論如何，有沒有人有處理這個問題的任何提示？

Answer 1

這將是一個開始？

.container { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    border: 1px solid #ccc; 
 
    vertical-align: top; 
 
    height: 140px; 
 
} 
 
.cell.image { 
 
    width: 140px; 
 
    height: auto; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
} 
 
.cell.image img { 
 
    max-width: 100%; 
 
    width: auto; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="cell image" style="background-image: url('http://lorempixel.com/450/300/nature')">  
 
    </div> 
 
    <div class="cell text"> 
 
     Some text 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell text"> 
 
     Some text 
 
    </div> 
 
    <div class="cell image" style="background-image: url('http://lorempixel.com/300/450/nature')">  
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您必須將一個width:100%規則分配給圖像，以便告訴它伸展100％（不是更多）的父容器。

如果您試圖刪除該規則，您將看到圖像超出容器大小。

在這裏你可以看到一個例子：

div{ 
 
    border:1px solid #000; 
 
} 
 

 
img{ 
 
    width:100%; 
 
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ex, voluptate rerum optio omnis dolorum, deleniti nemo, similique totam voluptatibus quae? Provident assumenda accusamus aliquid laudantium voluptate aperiam dolore! Deserunt!<img src="http://lorempixel.com/550/350/animals" alt=""></div>

編輯：

如果圖像是浮動的，我建議你使用兩個div，一個文本，一個圖像。

下面是一個例子：

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    border: 1px solid #000; 
 
} 
 

 
img{ 
 
    width:100%; 
 
} 
 

 
.lfloat { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 

 
.text, 
 
.image { 
 
    position: relative; 
 
    float: left; 
 
    width: 50%; 
 
}

<div class="lfloat"> 
 
    <div class="text"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quam, cupiditate, soluta expedita error et adipisci placeat ullam! Eveniet mollitia excepturi eum nesciunt ipsam nihil illo modi voluptas non voluptate. 
 
    </p> 
 
    </div> 
 
    <div class="image"><img src="http://lorempixel.com/300/200/animals" alt=""></div> 
 
</div>