图像被裁剪答案

【问题标题】：Image getting cropped of图像被裁剪
【发布时间】：2021-05-05 14:19:12
【问题描述】：

当我将背景大小设置为覆盖时，我有一张图像被裁剪，但如果我将背景大小更改为包含，它就不够宽。我有特定的宽度和高度，我似乎无法找到不被裁剪的解决方案。

.hard-case-container {
background-image: url(/images/HARDCASE.png);
height: 536px;
width: 648px;
border-radius: 25px;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-around;

【问题讨论】：

背景尺寸：100% 100%； ?
https://css-tricks.com/perfect-full-page-background-image/
不同的设备，实际上是桌面上不同的窗口，具有不同的纵横比。除非您不介意将图像沿一个方向或另一个方向拉伸，否则您永远无法获得完全适合所有可能性的图像。这不仅仅是横向与纵向的问题。最好选择具有良好中心部分的图像，并在每个视口上尽可能多地显示。

标签： css image crop

【解决方案1】：

首先，您的 CSS 中缺少右括号。

其次，如果您想在肖像屏幕中显示横向图像，那么这将不起作用。反之亦然。

您总是需要找到一种折衷方案 - 要么剪切图像的某些部分，要么让图像的某些部分为白色（或设置其他背景颜色）。

如果你强制你的图片适应屏幕，它看起来会被拉长。

【讨论】：