javascript - 响应图像和不同的图片分辨率

Question

我有这个网站，正如您在索引页上看到的那样，我们有一个 80% 的宽度和 100% 的容器，其中有一张图片。现在不同的图像及其分辨率存在问题，有些被拉伸(stretch)有些很窄。 我希望图片为全屏尺寸和 80% 宽度，并具有适当的纵横比。我可能需要一些 javascript 来裁剪图像？请我需要一些关于如何做到这一点的见解。如果 slider 具有裁剪功能和 80% 宽度和 100% 高度的可能性， slider 也可以做到这一点

这是网址

http://tinyurl.com/otwocvz

Answer 1

尝试删除图像并将图像添加为 header2 背景。

.header2 {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: #CCC;
display: block;
background: url(http://leowd.com/wp-content/uploads/2014/08/leowd-umbrella-red2.jpg) no-repeat center center fixed;
background-size: cover; }