圖像尺寸，以適應在固定大小的div

Question

我有固定大小height:45px和width:60px並且沒有其他CSS到div的div。此div用於顯示客戶上傳的圖像。我想給圖像的尺寸，以便上傳的圖像將完美適合給定的div。我需要給出優化的尺寸，以便圖像在div中看起來很好。第一個邏輯，我試圖給與45乘60，90乘120像。 解決此問題的正確方法是什麼？請引導。提前致謝。

Answer 1

最好的事情是這樣的：

#div-to-contain-image img { 
    display: block; 
    height: auto; 
    min-width: 100%; 
    width: 100%; 
} 

，這會使得圖像儘可能最好。如果您需要完全覆蓋包含div，你可以做到以下幾點：

#div-to-contain-image img { 
    display: block; 
    height: 100%; 
    width: 100%; 
} 

Answer 2

div { 
 
    width: 60px; 
 
    height: 45px; 
 
    overflow: hidden; 
 
    border: 1px solid black; 
 
} 
 

 
div img { 
 
    width: 100%; 
 
    min-height: 100%; 
 
}

<div> 
 
<img src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1"/> 
 
</div>

Answer 3

我對你的圖像縮略圖設置多個解決方案。也許它會對你有所幫助。

溶液＃1： 圖像的垂直和水平中心內部的div

.thumb-container { 
     position: relative; 
     width: 60px; 
     padding-bottom:45px; /* padding is using for the height of image */ 
     margin: 0px; 
     overflow: hidden; 
     border: 1px solid black; 
    } 
    .thumb-img { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     border-radius: 0px; 
     padding: 0px; 
     overflow: hidden; 
     border: 0px; 
    } 
    .thumb-img img { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     margin: auto; 
     width: auto; 
     max-width: 100%; 
    } 

HTML

<div class="thumb-container"> 
                  <div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=80&h=50"></div> 
                 </div> 

視圖上的jsfiddle https://jsfiddle.net/5az8u7bj/

溶液＃2：圖像的垂直和水平中心width:100%格完全覆蓋圖像盒內沒有空白

.thumb-container { 
      position: relative; 
      padding-bottom:45px; 
      margin: 0px; 
      overflow: hidden; 
      border: 1px solid black; 
      width:60px; 
     } 
     .thumb-img { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      border-radius: 0px; 
      padding: 0px; 
      overflow: hidden; 
      border: 0px; 
     } 
     .thumb-img img { 
      position: absolute; 
      top: 0; 
      bottom: 0; 
      left: -100%; 
      right: -100%; 
      height:100%; 
      margin: auto; 
      width: auto; 
     } 

HTML

<div class="thumb-container"> 
                  <div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=500&h=200"></div> 
                 </div> 

觀的jsfiddle https://jsfiddle.net/2d6x3fn6/1/

也許這些解決方案會爲你

有幫助