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

Question

我有这个网站，正如你在索引页面上看到的那样，我们有80％的宽度和100％的容器，里面有一张图片。现在不同的图像及其分辨率存在问题，有些是拉伸的，有些是狭窄的。 我希望pic是全屏尺寸和80％宽度，并具有适当的宽高比。我可能需要一些javascript来裁剪图像？我需要一些关于如何做到这一点的见解。如果它具有裁剪功能并且可能具有80％宽度和100％高度

，则滑块也可以起作用

这是网址

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