css - 查找占据所有宽度但仅占页面高度 25% 的图像

Question

<分区>

Answer 1

您有很多方法可以解决这个问题。一个简单的方法是使用 background-image属性而不是 <img>标签。

例如:

div.image {
  background-image: url('your/img/path.jpg');
  background-repeat: no-repeat;
  background-size: cover (will cover all the div surface) || contain (will fully contains your image);
}

fiddle :

div.image {
  display: block;
  width: 100%;
  height: 50vh;
  
  background-image: url('http://musiccitiessummit.com/wp-content/uploads/chicago-1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  
  background-position: center center;
}

<div class="image"></div>

编辑 如果您必须使用 <img>标签，看看这个object-fit属性(property):https://css-tricks.com/almanac/properties/o/object-fit/