Question

我在这里有一个网站：http://ideedev.co.uk/newseed/design/，顶部的横幅很棒，我想要的方式 - 横幅图片100％宽度的网站和文字漂浮在中间和中间位置所有尺寸。

然而，对于较小的移动设备，我想调整图像的高度，因此它会缩小并保持图像的比例与文本仍然粘在中间。有人可以帮忙吗？

我的HTML在这里：

<div id="absolute1111" style=" background: url(<?php echo $feat_image; ?>);">
        <div class="centerd1111">
            <h1><?php the_title(); ?></h1>
        </div>
    </div>

我的CSS在这里：

#absolute1111 {
   position:relative;
   width:100%;
   height:50%;
   display:table;
   color: #fff;
   background-size: cover !important;
   background-repeat: no-repeat !important;
   background-position: 50% !important;
}

.centerd1111 {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    height:500px;
    padding: 0 50px 0 50px;
}

非常感谢:)

Answer 1

使用图像作为背景图像不允许缩小具有屏幕尺寸的图像，因为您必须手动调整高度以缩小图像，这不是一个好习惯。

在HTML浏览器中使用图像将能够缩小图像，保持纵横比不变。

在您的情况下，您可以使用移动媒体查询来调整图像高度，以便整个图像缩小并显示完整图像。

以下是相同的代码：

@media only screen and (max-width: 500px){
  .centerd1111 { height: 180px; }
}

请告诉我这是否适合您。

感谢。

Answer 2

而不是background css属性，您可以将图像作为元素，这样，您可以更轻松地操作它。如果我的小提琴。但对于这个小提琴，我只能用于移动设备，所以你需要将它应用于移动显示的@media查询。

https://jsfiddle.net/bdv2L0a0/

这个小提琴，我做到了，当显示器变小时，图像的高度将遵循其比例

.background img {
  width: 100%;
  height: auto; //default value, no need to declare this
}

Answer 3

如果你知道图像的比例（高度和宽度之间的比例），你可以这样做：

.your-container {
    overflow: hidden;
    height: 0;
    padding-bottom: 46.406570842%;  /* image height / image width */
}

这是用于嵌入iframe以保持不同视口大小的比例的技巧。它基于以下事实：当您为padding属性提供百分比值时，它会将此百分比应用于元素宽度。

此外，您不需要display: table将文本置于中心位置。你可以这样做：

.your-container {
    text-align: center;
    position: relative;
}
.your-centered-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

请参阅this jsfiddle。

调整移动设备的高度

3 个答案: