Question

这是3个内联块。第一个是可扩展的，右边的两个块具有固定的宽度。万一我们调整浏览器权限到块应该是可见的。 #blockID应该适合页面，同时如果我们调整窗口大小，图像应该是可伸缩的。

我正在尝试使第一个块中的图像可扩展。

我找到了几种使用JS的方法，但由于离散性，JS不适用。是否有一些技巧只使用css？

<div style="width: 100%; height: 300px; white-space: nowrap;" id="blockID">

        <div style="max-width: 640;">
            <div style="display: inline-block; height: 300px;  max-width: 300px; width: 100%; background: #ffff00; position: relative; overflow: hidden;" id="pano">
                <img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%;  min-width: 100%;  max-width: 100%; position: absolute; "/>
            </div>

            <div style="display: inline-block; height: 300px; width: 640px; background: #000;">

            </div>

            <div style="display: inline-block; height: 300px; width: 60px; background: #ff7870;">

            </div>
        </div>
    </div>

更新1： 我更改了草书

更新2： 我可以使用table css实现这个效果。但桌子并不好。 http://jsfiddle.net/6ng62eb7/4/

Answer 1

尝试仅为图像提供100％的最大宽度。

所以改变：

<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%;  min-width: 100%;  max-width: 100%; position: absolute; "/>

为：

<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style="max-width: 100%;"/>

Updated Fiddle

Answer 2

您需要为图片提供max-width: 100%。这将根据容器的比例缩放图像。然后你需要缩放图像所在的容器。现在你已经为父div设置了<div style="max-width: 300px; width: 100%;" id="pano">，所以img里面最多只能达到300px。

您还将整个容器设置为<div style="max-width: 640px;">，这意味着您的所有3个元素将永远不会超过640像素。

这就是为什么只有在缩小浏览器窗口时才能看到图像缩放的原因。

底线是，你必须使整个元素（包括其容器响应或这不起作用） - 你必须使用％而不是px，em ...在定义框大小时。这也意味着你想要保持在右边的其他两个元素必须是％（并且所有3个元素都需要加起来为100％。）

Answer 3

尝试将display-block和inline-block组合在一起：

<div style="width: 100%; height: 300px; white-space: nowrap;">
    <div style="width: 100%; min-width: 641px; ">
        <div style="display: table-cell; width: 30%; height: 286px; background: #ffff00; max-width: 350px; vertical-align: top;" id="pano">
            <img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" max-width: 90%; margin: 5%; " />
        </div>

        <div style="display: table-cell; width: 70%; min-width: 641px;">

            <div style="display: inline-block; width: 641px; height: 286px; background: #000;" id="content">

            </div>

            <div style="display: inline-block; width: 60px; height: 286px; background: #0044ff;" id="basket">

            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/rfh8dgqu/

我不确定跨浏览器兼容，但它适用于chrome

如何仅使用css来缩放图像块？

3 个答案: