我有一張任意形狀和大小的圖片，我想將其放大到一個包含的 div 中，而不改變其比例，也不切斷圖片的一部分。
下面是我的想法的圖示：
請注意，影像有時是垂直居中，有時是水平居中。
如果影像始終是寬的，我可以使用：
如果影像始終是寬的，我可以使用：
img {
width: 100%;
height: auto;
margin: auto;
但是，如果圖片比較窄的話，這就行不通了，因為它最終會砍掉頂部&底部。
是否有一種方法，可能使用grid或flex，這將適應影像？
uj5u.com熱心網友回復：
在css中使用object-fit: contain作為img的選擇器，
- 你的
<img>標簽將是你的灰色框架，如上圖。 - 真正的圖片將按照你的意愿被托管，無論圖片的內在大小和
<img>標簽的大小是什么。
uj5u.com熱心網友回復：
你不需要使用flex/grid，也許只需要添加object-fit:cover
。img {
width: 100%;
height: auto;
margin: auto;
object-fit: cover;
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/326120.html
標籤：