將img限制在div並保持寬高比？

-2

我試圖保持一個圖像溢出它在裏面的div。

我已經試過：對這些值的

div.row #whoPic { 
    object-fit: contain; 
    max-width: 100%; 
    max-height: 100%; 
    overflow: hidden; 
    max-width: auto; 
    max-height: auto; 
    max-width: 300px; 
    max-height: 300px; 
}

...和許多變化。

我也試過針對所有的img，以及非常精確的目標。

請幫我一把。在這裏堅果。

來源

2017-07-25 David

您使用CSS的是整個塊？ –

可能的重複[如何自動調整圖像以適合div容器]（https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit- a-div-container） –

事實上，這個問題之前已經被問過了。
這裏：How do I auto-resize an image to fit a div container
這裏：Make an image width 100% of parent div, but not bigger than its own width
這裏：Contain an image within a div?
這裏：How do I fit an image (img) inside a div and keep the aspect ratio?

與max-widthmax-height和均設定爲100%限制圖像。

.theContainer { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: lightblue; 
 
} 
 

 
.theContainer img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div class="theContainer"> 
 
    <img src="https://placehold.it/200x200"> 
 
</div> 
 
<h3> The original image size is 200x200 </h3> 
 
<img src="https://placehold.it/200x200">

來源

2017-07-25 01:27:44

''不使用或需要結束斜線。 – Rob

@Rob我從來沒有真正確定，但沒問題，謝謝！ –

這是否也適用於其他對象，如iframe和表單？我有一種表格也會離開它的div，但不管我做了什麼，我都不能讓它留在那裏，或者當窗戶變小時讓div改變它的高度。 – David

將img限制在div並保持寬高比？

回答

相關問題