html - 如何为小屏幕和全屏尺寸调整图像尺寸？

Question

我需要使图像适应两种屏幕尺寸（移动和全屏）

我试图改变一些事情，但我失败了。

我的 div 类，具有固定的宽度和高度：

<div class="pull-left thumb-contenido"><img style= "max-width: 1200px; max-height: 600px;" class="center-block img-responsive img-fluid" src="{{ asset('/images/blogs/'.$post->image) }}" /></div>

也许在这里我可以为两个屏幕设置固定的图像大小？

标签： htmlcssimagebootstrap-4

Answer 1

使用缩放图像，您有两个选择。您可以固定宽度或高度中的一个，让另一个根据图像纵横比自动调整。否则，如果您需要固定宽度和高度（在您的情况下为最大宽度和最大高度），您可以选择使用object-fit 属性在可用空间内调整图像。另一种选择可能是使用媒体查询来调整不同屏幕上的分辨率