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

Question

这是 3 个内联块。第一个是可缩放的，右边的两个块具有固定宽度。如果我们调整浏览器的大小，阻止权应该是可见的。 #blockID 应该适合页面，同时如果我们调整大小图像应该是可缩放的 window.

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

我找到了几种使用 JS 来做到这一点的方法，但由于离散性，JS 不适合table。是否有一些技巧可以仅使用 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 来实现这种效果。但是 table 不好。 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 像素。

这就是为什么只有当您缩小浏览器 window 时才会看到图像缩放的原因。

底线是，您必须使整个元素（包括其容器响应，否则这将不起作用）- 在定义框大小时，您必须使用 % 而不是 px、em...。这也意味着您要保持在右边的其他两个元素必须在 % 中（所有 3 个元素加起来需要达到 100%。）

Answer 3

尝试像这里这样组合显示块和内联块：

<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 缩放图像块？

How to scale image block using only css?

html

css

scale