Question

我想了解如何在响应式设计上展示横幅或徽标，但是找不到找不到被标记为不好或可能被关闭的问题。我已经尝试过多种解决问题的方法，但没人喜欢。因此，我什至不知道如何提出这个问题，甚至不知道从哪里开始寻找答案或如何提出问题。请给我一个如何措辞的想法，以便有人看到我的问题。我已经尝试过网络搜索，但是没有解决任何问题的方法，甚至无法弄清楚如何使用它。

以防万一有人看到了这个，我正在做的是一个没有响应的网站，并且横幅的宽度为1100像素x高度为110像素。趋势似乎是远离此类横幅，改用方形或圆形的徽标，或使用文字进行品牌宣传。如果我只是将横幅的大小减小到500px，那么如果使用百分比值，则高度将按比例减小到40或50px。在小屏幕上，这显然看起来不好。

此外，如果我将图像缩小到更大的正方形尺寸，则当使用CSS背景图像样式而不是由div标签包围的img标签时，图像实际上并未按百分比值调整大小。我还没有找到一种方法来使用容器的background-image属性上的百分比值来控制对齐方式和尺寸。我可以告诉我的客户，我们不应该在响应式设计中使用宽幅横幅，但是我不知道这是否意味着我错过了一个选择。

使用媒体查询在较小的显示器上似乎需要不同的图像。可以将对齐和调整为百分比值与背景图像CSS样式一起使用，还是应该使用img标签投放不同的图像？

最后，由于像素宽度大于900像素或1000像素，在高像素密度的平板电脑甚至智能手机上提供大图像？使用高密度显示器时，即使智能手机的宽度似乎也可能大于1000px，但看起来可能不正确。

Answer 1

这将调整大小：

.img-class {
  background-image: url('path/myImage.png');
  background-size: 200px 200px;
}

第一个值为 width ，第二个值为 height ，您也可以使用％，或使用单个值来缩放整个内容，例如：{{1 }}

在较小的显示器上使用媒体似乎需要不同的图像查询。可以与百分比值一起使用对齐和调整大小背景图片CSS样式，还是应该使用 img标签？

是的，只要您按比例缩小而不放大，或者模糊即可。

最后，在高像素密度的平板电脑甚至智能手机上由于较大的像素数较大，因此可以提供较大的图像大于900px或1000px？对于高密度显示器，似乎智能手机的宽度可能大于1000px，但可能不会看起来不错。

只需确保您的图像已“准备好视网膜”就够了，这意味着，如果您要在网站上放置200x200像素的图像，请改为创建400x400像素，然后使用CSS强制将其始终设置为200x200，因此会读取400x400，并将其调整为200x200，使其在移动设备上变得不模糊。

旁注：：如果您有图形图像而不是照片，我建议您使用所有浏览器现在都支持的svg（矢量图像），它们是可扩展的，因此默认情况下视网膜可以使用尺寸较小。

CSS background-image属性可以用于调整背景图像的大小吗？

1 个答案: