Question

我在获得英雄形象以满足客户期望方面遇到问题。

在桌面视图上，图像可以按预期放入英雄div中并吸引客户，但是，随着视口变小，在移动设备上，图像的一部分会被切除以保留图像的比例。客户不喜欢这样。

我不能将宽度和高度设置为100％，因为图像会变形。如果将宽度设置为100％，将高度设置为自动，则图像在某些区域仍会被裁切，或者图像的高度会比容器小，从而留出很多空白。是否有解决此问题的推荐解决方案？

是否建议将背景图像用作英雄图像并适当设置样式？

拥有多个尺寸的图像并使用<picture></picture>根据屏幕尺寸显示不同的图像是否更好？

还是使用CSS3 vh，vw单位？

我应该只使用媒体查询来调整英雄容器的高度吗？

我是否应该从客户那里获得与英雄容器比例合适的图像？

<div class="hero-container" style="width: 100%;display: inline-block;">
    <img src="https://imgurl">
</div>

.hero-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 400px;
}

.hero-container img {
    margin: 0px auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #999;
    text-align: center;
    max-width: inherit;
}

Answer 1

我会考虑使用背景图片并将其设置为cover：

（注意：我已经将背景图像放在html的内联样式中，因为我认为它可以是动态的。）

.hero-container {
  width: 100%;
  height: 400px;
  background-repeat:no-repeat;
  background-position:center center;
  /*background-attachment:fixed; (removed)*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div class="hero-container" style="background-image: url(http://placeimg.com/640/480/people?t=1571230744264)">
</div>

我不完全了解客户的期望，但也许设置最小和最大高度会有所帮助。另外，您可以添加一些媒体查询来为移动设备设置特定的最小值/最大值。

html,body {
margin:0; min-height:100%; height:100%;
}
.hero-container {
  width: 100%;
  min-height: 200px;
  height:300px;
  max-height:50%;
  background-repeat:no-repeat;
  background-position:center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div class="hero-container" style="background-image: url(http://placeimg.com/640/480/people?t=1571230744264)">
</div>

Answer 2

upd：在您发布代码之前，我已经写了

我认为img-fluid bootstrap类是最简单的方法。

...
<body>
<img src="img/yourhero.jpg" class="img-fluid" alt="Responsive hero image">

</body>

该类将此CSS添加到您的img中：

img {
max-width:100%;
height:auto;
}

制作响应式“英雄”图像的最佳解决方案是什么？

2 个答案: