Question

我有一个HTML行：

<img alt="Slider Background" class="background-image" src="img/slide1.jpg" />

当屏幕为＆lt; 400px？

时，有没有办法调用不同的img路径？

这是滑块的一部分，我宁愿避免进入CSS。我相信在html中应该有一个简单的解决方案 - 比如srcset，由于某些原因不起作用：

<img src="img/slide1mini.jpg" srcset="img/slide1.jpg 400w"/>

我还尝试了<img>的数据媒体属性，但没有运气：

<img src="img/slide1mini.jpg" data-media="(max-width: 400px)" />
<img src="img/slide1.jpg" data-media="(min-width: 401px)" />

社区帮助急需。

Answer 1

你可以尝试这个Live FIDDLE

[。img-responsive是自定义类自举] 您可以为您的网站使用自定义类。

.img-responsive {
 display: block; 
 min-width: 100%;
 height: auto;
   }

//你将html部分放在这个

中

<img class="img-responsive" src="demo.jpg"/>

对于背景图片，您只需更改高度：100vh！important;宽度：100％;这是背景图像示例

＆＃13;

.img-responsive {
  display: block;
  width: 100%;
  min-height: 100vh;
}

＆＃13;

<img alt="Slider Background" class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGZQ54YTm4Te6RYbyrhYzs-FusS0HjKwpp8GlhpoH67XRHP6Js" />

＆＃13;

Answer 2

我认为最好的方法是使用background-image代替<img>代码，您可以使用媒体查询进行修改。

例如，

<div class="img"></div>

.img{
background-image:url('//your link')
}

现在，您可以使用媒体查询来更改图像。例如：

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
   .img{
        //change image url
     }


}

您可以阅读有关媒体查询的更多信息here。

Answer 3

使用适当的类向页面添加两个img，使用css媒体查询隐藏并显示相关内容。初始页面加载时不会加载显示为none的图像。

示例：

HTML：

CSS： .desktop {display：block; } .mobile {display：none; }

@media all and (max-width: 400px){
    .desktop { display: none; }
    .mobile { display: block; }
}

根据屏幕宽度更改img路径

3 个答案: