时间戳

首页 > 解决方案 > Div 表带：将窗口大小调整到某个点后背景图像开始缩小

html - Div 表带：将窗口大小调整到某个点后背景图像开始缩小

问题描述

我正在尝试使表带充满超大图像。这个想法是，该图像具有一些固定的大小并且不会改变。图片所在的 div，在放大浏览器窗口的同时，应该显示图片的隐藏部分。我做到了。但是有一个问题......在某些时候，当浏览器窗口缩小图像时。

我希望在这个图像的那个高度将等于容器的高度，并且侧面将被裁剪，而图像将保持其比例。

一些代码：

.picbanner {
  background: url(https://IMG) no-repeat center center;
  background-size: 100% auto;
  height: 250px;
  object-fit: cover;
  overflow: hidden;
}

JSF：

https://jsfiddle.net/kshdrynp/2/

提前谢谢你，
GT

标签： htmlcss

解决方案

更改background-size为cover：

.picbanner {
  background: url(https://IMG) no-repeat center center;
  background-size: cover;
  height: 250px;
  object-fit: cover;
  overflow: hidden;
}

https://jsfiddle.net/1fuqyvLk/

推荐阅读