在台式机上设置图片大小,但在使用移动设备时调整大小

时间:2018-08-14 10:43:29

标签: html css

是否有一种方法可以在使用桌面浏览器时将图像设置为特定大小,但是可以使用移动设备自动将其调整为屏幕大小?

我目前只是将图片硬编码为HTML中的特定大小。

<img src="URL" alt="Cool Link" style="width:720px;height:100px;border:0;">

我愿意尝试HTML / CSS / JS等。谢谢!

3 个答案:

答案 0 :(得分:0)

您应该将class属性添加到img标签,然后在css下面添加图像

<img src="link" alt="Cool Link" class="anyofimgclass">

.anyofimgclass{
display: block;
max-width: 100%;
height: auto;
}

答案 1 :(得分:0)

正如Arti Rana所说,您应该首先创建一个类。 然后,您可以使用@media属性来设置特定最大宽度的样式。您可以在这里查看:

CSS @media Rule

P.S。我建议您使用容器(div)来创建类。

答案 2 :(得分:0)

CallerClassName
this

https://jsfiddle.net/Sampath_Madhuranga/6t2snwa3/6/

这很好。尝试这个