将img限制在div并保持宽高比？ [英] Constrain img to div and maintain aspect ratio?

问题描述

我已经尝试了所有可以找到的东西。

I've tried everything I can find.

我试图阻止图像溢出其内部的div之外。

I'm trying to keep an image from overflowing outside the div that it is inside.

我试过：

I've tried:

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;
}

...以及每个值的许多变体。

...and many variations of each of those values.

我也尝试过针对所有img，以及非常准确地定位。

I've also tried targeting all img's, as well as targeting very precisely.

请帮帮我。在这里疯狂。

Please help me out. Going nuts here.

推荐答案

事实上这个问题之前已被问到过。

这里：如何自动调整图像的大小以适应div容器

这里：使图像宽度为父div的100％，但不大于其自身的宽度

在这里：在一个div中包含图像？

这里：我如何在div内合适图片（img）并保持宽高比？

In fact this question has been asked before.
Here: How do I auto-resize an image to fit a div container
Here: Make an image width 100% of parent div, but not bigger than its own width
Here: Contain an image within a div?
Here: How do I fit an image (img) inside a div and keep the aspect ratio?

使用限制图片， max-width 和 max-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">

这篇关于将img限制在div并保持宽高比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！