图像响应与 img

Question

我要达到的效果是本站第一张主图：http://shop.soot.me/

据我所知，这是通过后台实现的，而不是 <img>。是否可以使用<img> 标签来实现这一点？我试过了，但它并不完全在那里。

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

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

background-size: cover; 自动将图像拉伸到容器的宽度。