如何为较小的屏幕调整图像大小？

Posted 2023-03-06

【中文标题】如何为较小的屏幕调整图像大小？

【英文标题】：How to resize an image for smaller screens?

【发布时间】：2020-09-26 18:25:12

【问题描述】：

我正在尝试调整图像的大小，以使其适合较小的屏幕显示。目前图像可以按比例缩小，但对于较小的屏幕来说太小了。首先，我尝试使用媒体查询，然后使用图片标签。见下文：

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<picture>
<source srcset="logo3.jpg" media="(max-width: 480px)">
<source srcset="logo2.jpg">
<img class="logo" src="logo2.jpg"  >
</picture>

或

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<img class="logo" src="logo2.jpg"  >

CSS

.logo 
display: block;
margin: 0 auto 0 auto;
width: 16%;


img
width:100%;
height:auto;


@media screen and (max-width:480px)
.logo 
width: 150px;

我已经玩了几个小时的代码和图像大小，但似乎没有任何效果。

代码有问题吗？

请有人为我提供解决方案或指出正确的方向吗？

附言。我是初学者，所以请让它对初学者友好:) 谢谢！

【问题讨论】：

这能回答你的问题吗？ How do I auto-resize an image to fit a 'div' container?

【参考方案1】：

对于图片（或任何相关内容），您的尺寸不能为px，它必须为%。

因此，如果您希望您的图像可以缩放，但不允许大于 x，那么您可以执行以下操作：

img
   width: 100%;
   max-width: 500px;

现在您的图片将始终为 500 像素，但是当您的屏幕尺寸小于 500 像素时，图片将占据屏幕宽度的 100%。

这也消除了为所有内容创建媒体查询的需要。

【参考方案2】：

您不应该为您的徽标内嵌样式。

<source srcset="logo3.jpg" media="(max-width: 480px)">

这样会好很多

.logo3 
  width: 220px;

<img class="logo3" src="logo3.jpg">

我只需将徽标放置一次，然后根据屏幕显示不同的大小

.logo3 
  width: 220px;


@media only screen and (max-width: 500px) 
.logo3 
  width: 480px;

<img class="logo3" src="logo3.jpg">

如果这有帮助，请告诉我。