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

Question

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

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" alt="name" width="220">
</picture>

或

HTML

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

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;
}

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

代码有问题吗？

有人可以为我提供解决方案或为我指明正确的方向吗？

Ps。我是初学者，所以请使其对初学者友好 :) 谢谢！

Answer 1

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

<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">

如果有帮助请告诉我。

Answer 2

对于图片（或任何与此相关的内容），您的尺寸不能在 px 中，它必须在 %.

中

所以如果你想让你的图像缩放，但不允许大于 x，那么你可以执行以下操作：

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

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

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

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

How to resize an image for smaller screens?

html

css

image

image-resizing

media-queries