Question

我试图实现的效果是本网站的第一张主要图片：http://shop.soot.me/

据我所知，这是通过背景来实现的，而不是<img>。是否可以使用<img>标记实现此目的？我尝试过它，但它并不完全在那里。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

这是你想要做的吗？您引用的网站实际上使用background属性来创建您正在谈论的效果。我怀疑这实际上是你想要做的，而不仅仅是使用图像。此代码处理后台封面：

.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;会自动将图像拉伸到容器的宽度。

图像响应与img

1 个答案: