我有一个带有背景图像的div

<div class="blog-img" style="background-image: url('{{ $blog->imgUrl }}');"></div>

问题是,如果不将样式设置为固定的高度和宽度,我无法呈现此图像

Css:以下内容:

.blog-img {
  width: 600px;
  height: 500px;
  background-size: 100% auto; 
  background-position: unset;
  background-repeat: no-repeat;
}

所有的输出几乎都是我需要的,但唯一的问题是高度的问题.当我缩小屏幕时,我需要切断块的多余部分,但这不会发生,因为设置了固定的高度

enter image description here

我怎么做才能让屏幕缩小时,我在屏幕上 Select 的这一块被切断?

推荐答案

在我看来,你有两个 Select :

  1. 在与图片的纵横比匹配的div上设置aspect-ratio.这将确保对于div的任何宽度,它的高度将与图片的纵横比匹配,因此它不会被拉伸或裁剪.一定要用background-size:contain.
  2. background-size设置为cover,这样图像上将自动裁剪,但它将适合所有大小的div.提示:您可以调整background-position属性,以确保图片中您最关心的部分是可见的,例如center center.

如果你只关心图片的正确显示,那就 Select 第二个选项.但是,如果您div中有内容,或者div的大小不在您的控制范围之内,请使用第一个.

Html相关问答推荐

为什么html复选框总是具有只读属性?

Vue.js复选框对齐问题:在表格单元格中居中复选框

D3.js—分组条形图—更新输入数据时出错

如何在angular 17.2中使用routerLink解决此错误

未在抖动中播放的HTML音频||文本正在工作其他标记正在播放,但音频未播放

将导航项目底部边框与导航栏对齐

柔性盒内的物品;t覆盖整个宽度,即使设置为100%

带有排序元素的 CSS 网格

来自元标记的响应文本

Flex:第一个 div 有列,下一个 div 有行

配置了 HTML 视口的 Google Apps 脚本移动网络应用程序无法正确显示

并排对齐两个文本区域列

BeautifulSoup用名称列表的findall无法找到另一个目标后面的目标

a with