如何在基于元素的响应式布局中使用图像作为背景？

Question

我想在布局的左侧使用一个人的图像。但在较小的屏幕上它看起来很长。我尝试使用以下背景属性：

background: rgba(0, 0, 0, 0) url("../images/login.png");
background-size: 100% 100%; // i have tried with contain and cover as well
background-repeat: no-repeat;
height: 92%;

Answer 1

使用 background-size: cover 如果您不喜欢这样的结果，请使用 background-size: contain

Answer 2

使用 background-size: contain 并删除 height: 92%

Answer 3

你可以试试：

background-size: auto; background-position: left center;

也许你可以用 https://codepen.io 创建一支笔来重建问题。

Answer 4

因为它会在比其 res 更大的背景上被拉伸，移除高度属性可能会显示更好的结果。也可以直接根据静态宽高设置。

如何在基于元素的响应式布局中使用图像作为背景？

How to use image as background in element based resposive layout?

css

responsive-design

responsive-images