5

即使在 CSS 中将它们设置为 100% 宽度，如何启用放大图像？

这个问题可能听起来很矛盾——如果你将某些东西设置为 100% 宽度

img {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    margin-bottom: 0.66em;

你想要那样，不是吗？

嗯......想象一下：有一个图片库，你希望它是 100% 宽的。用户缩放，这只会缩放文本。无论缩放级别如何，图像都将继续保持 100%。

我想要的是这种行为：

图像在中性缩放级别为 100% 宽，但是当用户缩放页面时，图像也会被缩放，但是：图像被调整为始终为窗口的 100%，即使用户调整浏览器大小（如果在正常情况下飞涨）。

是否有唯一的 CSS 解决方案？

使用 javascript 的可能解决方案是将图像宽度设置为 javascript 中浏览器窗口的 px。缩放将按预期适用于图像。当用户调整浏览器大小时，javascript 必须再次更改图像的宽度。

4

3 回答 3

2

缩放行为取决于浏览器，甚至是可配置的，取决于访问者使用的浏览器，行为是您所描述的或您已经想要的！

控制行为的唯一方法是自己实现缩放。Javascript 是一种方式，但请记住，浏览器缩放永远不受您的控制。出于可访问性的原因，它在那里。您自己的缩放将允许用户以另一种方式缩放您决定使脚本使用的任何元素。

于 2013-04-03T18:28:26.700 回答
1

遗憾的是，这不能在没有 JavaScript 的情况下完成，因为您需要的功能是在他们悬停的 PX 上进行缩放...所以是的，您可以将其放大，但是当他们移动图像时图像不会改变如您所料，光标在图像上。您应该选择使用jQuery或任何其他 JavaScript 库，例如Mootools。

在 Google 上简单地搜索jQuery Zoom 之类的东西- 你会被预先制作的插件数量所淹没，以便让你轻松完成这项任务。

这是我发现满足您要求的两个：

于 2013-04-03T18:36:33.730 回答
1

我遇到了同样的问题。

首先要指出的是，缩放仍然适用于移动设备。对于其他设备，您可以设置 min-width:100% 而不是宽度。这将使您放大但不能缩小。

另一种解决方案是使用媒体查询根据屏幕大小设置 px 宽度，例如：

@media only screen and (min-device-width:1440px)
@media only screen and (max-device-width:960px)
@media only screen and (min-device-width:768px)
@media only screen and (max-device-width: 550px)
@media only screen and (max-device-width:480px)
@media only screen and (max-device-width: 400px)

谢谢！

于 2017-08-02T05:56:07.447 回答