img图像响应能力

Question

我试图达到的效果是这个网站上的第一张主要图片：http://shop.soot.me/

据我所知，这是通过后台实现的，而不是通过<代码>

https://jsfiddle.net/jzhang172/e1javm23/

css prettyprint-override">.box{
  width:100%;
  height:500px;
  background:black;
  overflow:hidden;
}
.box img{
max-width:190%;
min-height:100%;

}

<div class="box">
  <img src="http://www.hdwallpapersnew.net/wp-content/uploads/2015/12/landscape-desktop-hd-wallpaper-images.jpg">
</div>

Answer 1

这是一小段代码，它将图像填充到盒子容器宽度的100%。https://jsfiddle.net/9pjxeo6o/

这是你想做的吗？您引用的网站实际上确实使用了背景属性来创建您所说的效果。我怀疑这实际上是您想要做的，而不仅仅是使用图像。此代码处理背景封面：

.homepage-hero-video, .homepage-hero-image {
    display: block;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

背景尺寸：封面 自动将图像拉伸到容器的宽度。