2

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

让我们假设在小提琴中正确地看到它，我们有一个 500 像素的容器的最大宽度，并且图像的宽度是 85 像素（左对齐）和 185 像素（右对齐），对于高于 500 像素的分辨率，中间留出 250 像素的空白. 实际大小是 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/

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

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

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

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

预期结果是两个图像都随着分辨率变窄而减小其尺寸。

4

1 回答 1

0

见这个小提琴。

jsfiddle.net/xGPvM/7/

它以 250 像素的分辨率显示图像。检查这个。您必须以百分比形式给出图像宽度。它自动在低分辨率下很好。

于 2013-07-17T07:55:43.267 回答