Javascript 当达到高度限制时，如何裁剪图像使用html和css

发布于01月16日

我有一个有点大的图像，为了不占据更宽设备的所有屏幕，我希望当达到某个高度限制时，从顶部和底部看起来都是裁剪的，例如600px.这在更小、更窄的屏幕上不是问题，因为图像按比例缩小，不会覆盖我的Web应用程序的其他部分.提前谢谢！

这是我目前得到的:

Html:

  <div class="image-container">
    <img src="../../assets/home_image1.jpg" alt="bg image of airplane" class="background-image" />
    <div class="text-overlay">
      <h1>Universal Tours</h1>
    </div>
  </div>

Css:以下内容:

.image-container {
  position: relative;
  text-align: center;
}

.background-image {
  width: 100%;
  height: auto;
  display: block;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5); /* Optional background color */
  padding: 10px;
  color: #fff; /* Text color */
  border-radius: 5px; /* Optional border-radius */
}

我试过高度限制，但它会在保持宽高比的情况下缩小图像，这会在图像周围留下空白，看起来不是很好.

.image-container { position: relative; text-align: center; overflow: hidden; /* hides extra parts of image */ max-height: 600px; /* max height */ } .background-image { width: 100%; height: 100%; /* sets height = 100% of the container */ object-fit: cover; /* will make sure image covers the area and is cropped */ }

Javascript 当达到高度限制时，如何裁剪图像使用html和css

推荐答案

Javascript相关问答推荐

当promise 在拒绝处理程序被锁定之前被拒绝时，为什么我们会得到未捕获的错误？

我试图实现用户验证的reduxstore 和操作中出了什么问题？

使用下表中所示的值初始化一个二维数组

Google maps API通过API返回ZERO_RESULTS，以获得方向请求，但适用于Google maps

如何使onPaste事件与可拖动的HTML元素一起工作？

PDF工具包阿拉伯字体的反转数字

本地库中的chartjs-4.4.2和chartjs-plugin-注解

如何创建返回不带`new`关键字的实例的类

映射类型定义，其中值对应于键

在Reaction中的handleSubmit按钮内，useSelector值仍然为空

如何在箭头函数中引入or子句？

将嵌套数组的元素乘以其深度，输出一个和

用于部分字符串的JavaScript数组搜索

背景动画让网站摇摇欲坠

如何在尚未创建的鼠标悬停事件上访问和着色div？

使用Perl Selify：：Remote：：Driver执行Java脚本时出错

计算对象数组中属性的滚动增量

递归地将JSON对象的内容上移一级

如何格式化API的响应

单击子按钮时将活动切换类添加到父分区