CSS：图像溢出

我试图使图像适合黑色边框div，无论它们是否旋转。我尝试过溢出：隐藏、最大高度：100%和对象适合度：包含但静止图像溢出。随着变换。我不知道下一步该怎么办。需要帮助吗

<div style="border: 1px solid">
  <img img-fix-orientation="model.post.image" ng-src="{{model.post.image ? model.post.image : model.post.sub_category.name == 'Service' ? 'images/service.png' : 'images/thing.png'}}" style="max-width:100%;" alt="post image" />
</div>

---

div必须有一个设置宽度和高度来知道要考虑什么溢出。

---

如果您说div是500px宽，那么溢出将应用

有两种方法可以实现这一点。您可以指定包含元素的高度，同时将

overflow-y

属性设置为

hidden

。（必须设置一个高度……没有一个设置，浏览器怎么知道要考虑什么溢出？）< /P>

.container{
边框：1px纯黑；
高度：100px；
溢出y：隐藏；
}
.img{}

图像元素的高度为150px，但包含元素的高度仅为100px

注意，

对象匹配

缺乏良好的浏览器支持，并且有一些选项可以克服这一点，尽管这里我想展示

包含

如何应用于和w/o

转换

要在未剪切的

img

元素中显示图像，请使用

对象拟合：contain

，将

宽度和/或
高度设置为
100%
，这样可以使垂直和水平图像都适合，而不会溢出


.wrapper{
显示：内联块；
高度：150像素；
宽度：250px；
填充物：5px；
保证金：5px；
背景：浅灰色；
}
.img{
身高：100%；
宽度：100%；
对象匹配：包含；
}
给你的部门id，比如说

#divid{
border: 1px solid black;
height: X px;
width: X px;
}

#divid img{

height: 100%;
width: 100%;

}

这将使您的图像适合于div内。
设置css溢出：隐藏在div上如果您需要将其适合于div内，请尝试将图像作为背景图像，并添加属性background size:cover或background size:contain。是隐藏解决问题。但是有没有一种方法可以在不破坏纵横比和隐藏的情况下拟合完整的图像呢？