How do I resize an image and surrounding container to fit in 100% of the screen—almost?

Question

Okay. So final touch here (for now).

On the homepage at http://www.rfm-inc.com, how do I set the header/(slider) image and surrounding container to fill 100% of the screen at any screen size below the actual image size?

Here's what I've come up with so far, but it doesn't do what I want it to do:

.flexslider .slides img {
    max-width: 100%;
    display: block;
}

Above the actual image size, there should be margins to either side of the image.

Also, the answer has to consider that the height of the source image is 1350 and the height needs to change according to screen size as well without distorting the image. I.E., when the screen height is below 1350, the image remainder of the full height would be hidden or cropped.

I hope that makes sense. It's hard to explain stuff like this. Thanks in advance!

Answer 1

对于已经设置了display: block的图像居中，您应该在左右使用margin auto：

margin: 0 auto;

如果您不希望它被拉伸或扭曲，您应该为图像添加height: auto。对于包括height元素在内的大多数html元素，默认情况下auto为img。当视口的高度低于1350 css像素（通常是这样）时，将自动显示滚动条，并且在向下滚动后图像的底部部分只能是屏幕。如果你想要裁掉那个部分，那么在向下滚动时，不会显示图像的任何部分，那么你应该使用你的图像作为背景图像到background-size: cover的容器div。