时间戳

首页 > 解决方案 > 如何显示完整图像而不是裁剪版本？

html - 如何显示完整图像而不是裁剪版本？

问题描述

我正在使用 HTML/CSS/Bootstrap/Js 构建一个网站。现在，我想使用 z-index 在带有背景图像的容器上叠加一个 jumbotron。

但由于某种原因，我用作背景图像的图像不断被裁剪，只显示上部。

我曾尝试更改高度属性，但问题是我希望它能够响应。

HTML 代码：

<div class="container-fluid  mt-5" >
      <div class="row imagez" >
        <div class="col-12 px-0 mt-5 mb-5">



        </div>
      </div>
    </div>

CSS 代码：

.imagez {
 background-image:  url("../flying.jpg");
 background-size: cover;
 background-repeat: no-repeat;
    background-position: 50% 50%;

 }

我希望有一个容器，无论浏览器的分辨率是多少，整个图像总是完整显示

标签： htmlcssbootstrap-4

解决方案

background-size: contain;

这将调整背景图像的大小以确保图像完全可见，同时background-size: cover;调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘剪掉一点。

推荐阅读