有沒有辦法讓圖像的外層使用CSS？

-1

我不知道爲什麼我downvoted，如果有人能告訴我，我做錯了什麼這將是冷靜，如果你不確定你的答案，我可以接受沒有或者是作爲答案以及如何做到這一點的簡單想法。

.gallery { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
} 
 

 
.gallery img { 
 
    min-width: 33%; 
 
    max-width: 33%; 
 
    min-height: 120px; 
 
    max-height: 120px; 
 
}

<div class="gallery"> 
 
    <!--Images users provide examples:--> 
 
    <img src="https://unsplash.it/200"> 
 
    <img src="https://unsplash.it/200/100"> 
 
    <img src="https://unsplash.it/100/300"> 
 
    <!--etc...--> 
 
</div>

這沒關係，但我注意到，一些圖像看起來很醜，因爲他們是水平圖像或垂直的，我給他們一個田字（我不喜歡他們如何看我的時候給他們寬度/高度自動，因爲他們都在一起看起來混亂和壞）。

我最近所做的就是在網絡的另一部分是做這樣的事情：

.image-cool { 
 
    min-width: 230px; 
 
    max-width: 230px; 
 
    min-height: 280px; 
 
    max-height: 280px; 
 
    /*Has a rectangle shape*/ 
 
    background: #eee; 
 
} 
 

 
.image-cool img { 
 
    max-width: 230px; 
 
    max-height: 230px; 
 
}

<div class="image-cool"> 
 
    <img src="https://unsplash.it/200"> 
 
</div>

這最後的代碼在接下來的方式：

如果你把所有內部圖像的多個div將在屏幕中對齊，圖像將調整其容器所限制的寬度和高度，並且圖像不再顯得糟糕。

這裏的問題是，如果我可以在使用CSS的第一個代碼中實現第二個代碼的相同結果並且不需要像div或容器那樣添加更多HTML。

爲什麼我不想要另一個div？因爲第一部分的當前HTML對於一些長腳本來說是必不可少的，是的，我可以修改它，但這需要時間，我只是想問我是否可以節省一些時間。

非常感謝您的時間！ :)

來源

2017-07-19 Heriberto Juarez

而不是使用img標記，您可以在div上使用background-image和background-size: cover，因此任何圖像大小都可以放入元素中。

.gallery { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    text-align: center; 
 
} 
 

 
.gallery-image { 
 
    width: 33%; 
 
    height: 120px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
}

<div class="gallery"> 
 
    <div class="gallery-image" style="background-image:url(https://unsplash.it/100/300)"></div> 
 
    <div class="gallery-image" style="background-image:url(https://unsplash.it/200/100)"></div> 
 
    <div class="gallery-image" style="background-image:url(https://unsplash.it/200)"></div> 
 
</div>

來源

2017-07-19 04:53:48 Nhan

有沒有辦法讓圖像的外層使用CSS？

回答

相關問題