如何在CSS中将图像设置为100％宽度并启用缩放？

Question

如何在CSS设置图像为100％宽度时启用缩放？

这个问题可能听起来自相矛盾 - 如果您将某些东西设置为100％宽度

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

你想要这样，是吗？

好吧…试想一下：有一组图片，你希望它们的宽度为100％。用户缩放页面，但只会缩放文本。无论缩放级别如何，图片仍将保持为100%。

我想要的行为是：

在中性缩放级别下，图像的宽度为100％，但当用户缩放页面时，图像也会随之放大或缩小：即使用户调整浏览器大小（如果处于普通缩放模式），图像也会被重新调整为始终占据窗口的100％。

是否有 CSS-only 的解决方案？

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

- PetaspeedBeaver

Answer 1

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

控制行为的唯一方法是自己实现缩放。 Javascript 是一种方式，但请记住，浏览器缩放永远不在您的控制之下。它存在是为了辅助功能。您自己的缩放将允许用户以另一种方式放大您决定使您的脚本与哪些元素一起工作。

- Itai

---

我还没有足够的声望来投票支持，但非常感谢你的回答！谢谢！ - PetaspeedBeaver

Answer 2

我遇到了同样的问题。

首先要指出的是，在移动设备上仍然可以使用缩放。对于其他设备，您可以将宽度设置为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)

谢谢！

- Dovlet Mamenov

Answer 3

很遗憾，没有JavaScript就无法实现你所需的功能，因为它需要在鼠标悬停在PX上时进行缩放...所以，是的，你可以使它放大，但当他们在图像上移动光标时，图像不会像你期望的那样发生变化。你应该选择使用jQuery或任何其他JavaScript库，如Mootools来解决问题。

在Google上简单搜索类似jQuery Zoom的内容，你会被预制的插件数量压倒。

我找到了两个满足你要求的插件：

• 杰克·尔摩尔 jQuery 缩放
• jQZoom - 示例 4
• Jquery 图像缩放插件 - 内部缩放示例

- bybe

---

目前还没有足够的声望来投票支持，但非常感谢您的回答！谢谢！ - PetaspeedBeaver

完全没有问题，请记住，如果您没有声望，可以通过点击接受来接受问题。我并不建议您在我的问题上点击接受，但是在以后如果/当更多人回复时，请确保返回并标记接受，如果您使用了他们的方法。这样我们就可以专注于未回答的问题 ;) - Simon Hayter

好的，我会等一段时间，然后选择最适合此问题的选项，谢谢告知！ - PetaspeedBeaver