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

Question

我有这个网站，正如你在首页上看到的，我们有一个80%的宽度和100%的容器，里面有一张图片。现在有一个问题，不同的图像和他们的分辨率，一些是拉伸的，一些是狭窄的。我想要的图片是全屏尺寸和80%的宽度，并有适当的纵横比。我可能需要一些javascript来裁剪图像？我需要一些关于如何做到这一点的见解。此外，如果滑块有裁剪功能和80%宽度和100%高度的可能性，也可以做到这一点

这是url。

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; }