Question

我正在开发一个包含标题徽标的网页。此徽标中有两个徽标：一个带有透明背景，另一个带有橙色背景。图像宽度为3.000像素。我想调整图像大小以使两个徽标水平地适合div。因此，在每台设备上，我都会看到徽标和橙色背景的一部分（是什么让图像变长。

HTML

<div class="logo-header"><img src="logo.png"></div>

CSS

.logo-header {
    overflow: hidden;
}

它确实溢出了我想要的，但是当我使用iPhone 4或其他小屏幕时，我没有得到它的最小宽度。

这在CSS中是否可行，或者这是我应该用Javascript做的事情？

Answer 1

＆＃13;

.logo-header {
  background-image: url("http://bighugelabs.com/img/nbcam/ribbon_3000_bg_sh.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 20vh;
  width: auto;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="logo-header">&nbsp;</div>
</body>

</html>

＆＃13;

如果你检查这张图片，它的宽度是3000像素。

首先，我建议您优化图像（尝试使用tinypng.com）并使用绘画或其他类似的方法调整大小（在优化之前重新调整大小）。

然后使用背景封面并将其设置为背景图像

Answer 2

也许您可以尝试将图像分成两个图像。

使用CSS，然后插入第二个图像（橙色背景）作为.logo-header的背景图像，向右对齐。

Answer 3

我已经使用Rachel Gallen她的回答并添加了一些媒体查询，以在图像未显示徽标中的所有文本时强制调整大小。这只是一些硬编码值（例如最小宽度等）。

感谢您的帮助。

设置可能不会溢出的图像的最小宽度

3 个答案: