css - 使用 CSS 显示比实际更大的图像

Question

我编写了一个相当基本的 javascript 函数，当单击图像时，全尺寸版本会出现在前景中。

图像在 CSS 文件中设置了最大宽度和最大高度数字，以便在外部留出一些空间并保留其自身的比例。

问题是，如果图片恰好不大，或者用户设备的屏幕具有非常高的像素密度，那么“较大”的图片可能不会再大了。

有没有一种方法可以保持比例，比如两边不超过 90%，但将最大尺寸设置为 90%。

我发现最接近的类似方法是背景的填充选项。

干杯

Answer 1

将图像的宽度和高度设置为一个相对值，如100% - (margin + border + padding) 这样无论其实际尺寸如何，都会被拉伸(stretch)。

使用 max-width 和 max-height 是限制图像超出特定比例的好方法，但为图像留出空间来决定它的大小想要在这些范围内。你说你不想要这个，因此也设置 width 和 height。