时间戳

首页 > 解决方案 > CSS在div中保持高度，裁剪宽度

html - CSS在div中保持高度，裁剪宽度

问题描述

我一直在寻找一段时间，我仍然找不到确切的答案。我有一个<div>宽度占屏幕的 100%，高度固定为 600px。我想将背景图片添加到图片高度适合<div>高度的 div（600px 并且没有图片裁剪）。每当我修改屏幕的宽度时，高度应始终保持 600 像素。然后图片将居中并在宽度方向上裁剪。

标签： htmlcss

解决方案

尝试这个：

.container {
  width: 100%;
  height: 600px;
  background: url('https://images.pexels.com/photos/268415/pexels-photo-268415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
<div class="container"></div>

推荐阅读