Question

我正在尝试制作一个标题，使用图像流畅地适应较小的屏幕，如智能手机，但我无法使其正常工作。

让我们假设在小提琴中正确看到它，我们的容器的最大宽度为500px，图像为85px（左对齐）和185px（右对齐）宽度，中间留下250px空白用于分辨率高于500px。实际尺寸为2倍但不相关。

<div id="container">
    <div id="left">
        <div></div>
        <img src="..."/>
    </div>
    <div id="right">
        <div></div>
        <img src="..."/>
        <div></div>
    </div>
</div>
<style>
#container {
    margin:0 auto;
    max-width:500px;
    min-height:50px;
    height:20%;
    max-height:90px;
    background-color:#0FF;
}
#left {
    float:left;
    margin-top:5px;
    margin-left:10px;
    height:calc(100% - 5px);
}
#left div {
    height:calc(100% - 73px);
}
#left img {
    max-height:100%;
    max-width:85px;
    height:auto;
}
#right {
    float:right;
    margin-top:5px;
    margin-right:10px;
    height:calc(100% - 5px);
    position:relative;
}
#right div {
    height:calc(50% - (25px + 5px)/2);
}
#right img {
    max-width:185px;
    max-height:100%;
    height:auto;
    text-align:right;
}
</style>

像这样：

http://jsfiddle.net/Pinx0/xGPvM/6/

高于270px宽的分辨率可以正常工作。垂直缩放也可以。

现在，看看像250px这样的低分辨率会发生什么：

http://jsfiddle.net/Pinx0/xGPvM/5/

浮动项目移动到下一行而不是按比例缩小并适合一行。

预期结果是随着分辨率变窄，两幅图像都会缩小尺寸。

Answer 1

见这个小提琴。

jsfiddle.net/xGPvM/7 /

以250px分辨率显示图像。检查一下。您必须以百分比形式提供图像宽度。它会在低分辨率下自动生成。

响应式设计和浮动div的流体图像

1 个答案: