使用CSS显示大于图像的图像

Question

我写了一个相当基本的javascript函数，当点击全尺寸版本的图像出现在前台时。

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

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

有没有办法可以保持比例，两边不超过90％，但最大尺寸设定为90％。

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

干杯

Answer 1

将图片的width和height设置为100% - (margin + border + padding)之类的相对值，这样无论其实际尺寸如何，都会对其进行拉伸。

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

Answer 2

您可以将该图像嵌入div标签并将css属性宽度：100％应用于图像，单击图像可根据分辨率按比例增加div的宽度。在这种情况下，宽度小于父div的图像根据父div的宽度进行调整。