我正在尝试调整图像大小,以便它适合较小的屏幕。目前,图像可以缩小,但对于较小的屏幕来说太小了。首先,我尝试使用媒体查询,然后使用图片标签。见下文:
.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%。
这也消除了为所有内容创建媒体查询的需要。
您不应该为徽标内联样式。
<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">
让我知道这是否有帮助。