Fatal编程技术网
  • css/
  • Css 如何限制容器'；当包含较宽（>；X）图像时，是否将宽度设置为X？

Css 如何限制容器'；当包含较宽（>；X）图像时，是否将宽度设置为X？

css

Css 如何限制容器'；当包含较宽（>；X）图像时，是否将宽度设置为X？,css,Css,我需要我的div元素与屏幕一样宽，即使它的子图像元素比屏幕宽。可能吗？我在div上尝试了overflow:hidden，但没有成功 <div> <img src="image.jpg"> </div> 您可以使用以下功能： div{ 宽度：100%； 高度：100px； } 部门经理{ 宽度：继承； 身高：继承； 背景尺寸：封面； } 在CSS文件中 img { height:auto; max-width:100%; } 我不知道你的

我需要我的
div
元素与屏幕一样宽，即使它的子图像元素比屏幕宽。可能吗？我在div上尝试了
overflow:hidden
，但没有成功

<div>
    <img src="image.jpg">
</div>
您可以使用以下功能：

div{
宽度：100%；
高度：100px；
}
部门经理{
宽度：继承；
身高：继承；
背景尺寸：封面；
}
在CSS文件中

img {
  height:auto;
  max-width:100%;
}
我不知道你的html，所以这个答案可能不是唯一/最好的方法

拥有
overflow:hidden
只会让你的div隐藏任何“溢出”的内容。但是，默认情况下，div的宽度为
width:auto
，这会使div拉伸以容纳它所包含的任何子元素

只需添加
max width:100%
，就可以强制div停止超出其父级宽度的增长。这样，div将试图为了它的孩子而伸展，但还不足以与它的父母背道而驰

在您的情况下，图像试图拉伸div超过其应拉伸的范围，因此
溢出：隐藏
起作用，并隐藏图像中超出div宽度的部分。
将最大宽度设置为视口宽度的99%-最大宽度：99vw；将您的div设置为
最大宽度：100%
和
溢出：隐藏。很有效，谢谢！你能给我一个答案让我接受吗？
背景图片：封面让我困惑。。。为什么会这样？哎呀，打字错误。我会修好的。Cover告诉浏览器确保图像始终覆盖整个容器，即使它必须拉伸图像或从其中一个边缘切下一点。很好的措辞是“为了其子对象，但不足以与其父对象相悖”：