我正在尝试调整图像大小，以使其适合较小的屏幕显示。目前，图像可以按比例缩小，但对于较小的屏幕来说太小了。首先，我尝试使用媒体查询，然后尝试使用图片标签。见下文：
的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;
}
我已经在代码和图像大小上玩了几个小时了，但是似乎没有任何效果。
代码有问题吗？
请有人可以为我提供解决方案或为我指明正确的方向吗？
附言 我是初学者，所以请使其对初学者友好:)谢谢！
对于图片（或其他任何与此有关的图片），您的尺寸不能为px，必须为%。
因此，如果要缩放图像，但不允许其大于x，则可以执行以下操作：
img{
width: 100%;
max-width: 500px;
}
现在，您的图片将始终为500px，但是当您的屏幕尺寸小于500px时，图片将占用屏幕宽度的100％。
这也消除了为所有内容创建媒体查询的需要。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句