如何縮放一排圖像以適合容器寬度？

我想顯示一個網格圖像，將自動縮放以適應可用寬度。每行圖像的數量是任意的，並且可用寬度可以隨用戶重新調整窗口大小而變化。原始圖像也可以具有不同的寬度，但需要以相同的寬度來顯示。我寧願避免表格，並需要一個僅限CSS的解決方案。我設想的HTML是這樣的：如何縮放一排圖像以適合容器寬度？

<div class='img-grid'> <!-- one per page, typically fixed 70% of page width --> 
    <!-- can be an arbitrary number of rows per grid --> 
    <div class='row'> <!-- width would be 100% of img-grid width --> 
    <!-- can be an arbitrary number of images per row --> 
    <div class='img-wrapper'> <!-- wrapper needs to force images to same width --> 
     <img class='image' src="test1.jpg"/> 
    </div> 
    </div> 
</div>

看似簡單，但我發現與使用在每個4班的什麼CSS的圖像強制相同的寬度，規模是寬度，以便混淆（任意數量）的圖像適合行內沒有包裝，並確保一切隨着瀏覽器窗口寬度的變化而重新縮放。

感謝奈傑爾

來源

2014-12-09 nakb

你使用像引導或zurb任何框架？ – nCore 2014-12-09 12:08:52

不，我不是，只是普通的香草html和CSS。 – nakb 2014-12-09 13:44:34

-1

演示 - http://jsfiddle.net/u471prst/

* { 
 
    box-sizing: border-box; 
 
} 
 
.img-grid { 
 
    width: 70%; 
 
    border: 2px solid red; 
 
} 
 
.row { 
 
    width: 100%; 
 
    border: 2px solid blue; 
 
} 
 
.img-wrapper { 
 
    width: 100%; 
 
} 
 
.img-wrapper img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class='img-grid'> 
 
    <!-- one per page, typically fixed 70% of page width --> 
 
    <!-- can be an arbitrary number of rows per grid --> 
 
    <div class='row'> 
 
    <!-- width would be 100% of img-grid width --> 
 
    <!-- can be an arbitrary number of images per row --> 
 
    <div class='img-wrapper'> 
 
     <!-- wrapper needs to force images to same width --> 
 
     <img class='image' src="http://placeimg.com/640/480/any" /> 
 
    </div> 
 
    </div> 
 
</div>

來源

2014-12-09 12:17:51

感謝您的回覆。但是，如果每行包含多個大圖像，則不能縮放以適合一行。無論原始寬度如何，我都希望圖像完全適合整個行。 – nakb 2014-12-09 12:28:23

Flexbox將是有用的在您的方案：

添加display:flex到行：而flex: 1到行項目S：

.img-grid { width: 70%; } 
 
.row { width: 100%; display: flex; } 
 
img { width: 100%; } 
 
.img-wrapper 
 
{ 
 
    flex: 1; 
 
}

<div class='img-grid'> <!-- one per page, typically fixed 70% of page width --> 
 
    <!-- can be an arbitrary number of rows per grid --> 
 
    <div class='row'> <!-- width would be 100% of img-grid width --> 
 
    <!-- can be an arbitrary number of images per row --> 
 
     <div class='img-wrapper'> 
 
    <img class='image' src="http://placeimg.com/440/680/any"/> 
 
</div> 
 
<div class='img-wrapper'> 
 
    <img class='image' src="http://placeimg.com/640/380/any"/> 
 
</div> 
 
<div class='img-wrapper'> 
 
    <img class='image' src="http://placeimg.com/540/480/any"/> 
 
</div> 
 
<div class='img-wrapper'> 
 
    <img class='image' src="http://placeimg.com/640/280/any"/> 
 
    </div> 
 
<div class='img-wrapper'> 
 
    <img class='image' src="http://placeimg.com/740/480/any"/> 
 
</div> 
 
    </div> 
 
</div>

來源

2014-12-09 12:27:12 Luizgrs

Flex工作得很好，但對於如何支持早期瀏覽器（例如IE9）有任何想法。 – nakb 2014-12-09 12:39:24

對於IE8-9，你可以使用'display：table-cell'作爲'.img-wrapper'，它不像flexbox那麼完美，但是做一個合理的工作 – Luizgrs 2014-12-09 12:59:44

你可以用CSS表格佈局做到這一點，請參閱演示所示。

JSFIDDLE DEMO

.row { 
 
    display: table; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
.item { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.item img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="row"> 
 
    <div class="item"> 
 
    <img src="//dummyimage.com/100x100/aaa" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="//dummyimage.com/200x200/bbb" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="//dummyimage.com/300x300/ccc" /> 
 
    </div> 
 
</div>

來源

2015-07-11 21:32:57 Stickers

如何縮放一排圖像以適合容器寬度？

回答

相關問題