Question

我已经尝试了我能找到的一切。

我试图阻止图像溢出其内部的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，以及非常准确地定位。

请帮帮我。坚持到底。

Answer 1

事实上，此问题之前已被提出过。
在这里：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-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并保持宽高比？

1 个答案: