如何允许图像宽度超过其所在的div的宽度

Question

我有一个1140px宽的div，并且图像中是否存在我需要适合屏幕尺寸的图像，是否可以使图像宽度尺寸大于其所在的div宽度？

<div className="row" style="width: 1140px; margin-left: auto; margin-right: auto">
    <img className="aimg" src="~/images/background.gif" style="height: 325px" />
</div>

CSS如下：

.aimg {
    padding: 0;
    display: block;
    margin: 0 auto;
    height: auto;
    width: 100%;
}

就目前而言，div宽度限制了图像无法适合屏幕宽度

Answer 1

为您设置position: absolute; width: 100vw; height: 100vh;样式img，它应该可以工作：）

“ vw”代表viewWidth，“ vh”代表viewHeight。

https://www.w3schools.com/cssref/css_units.asp

以下代码笔基于：

https://css-tricks.com/full-width-containers-limited-width-parents/

Codepen本身：

https://codepen.io/anon/pen/vzawqv

Answer 2

您需要用于容器和图像的css类，以下示例假定div宽度为固定宽度并设置为480px。

.div_image {    
    max-height:480px;
    height: 480px;
}

.div_image img{
    height: 100%;
    width: 100%;
}