Question

我有以下代码在桌面上显示图像。

<div class="medium-5 large-12 columns">
  <img style="padding-top: 20px;padding-left:30px" src="~/assets/img/ty-desktop.png" alt="Back" />      
</div>

在iPad <div>中查看同一网页时，我需要显示不同的图像。

我该怎么做？

我尝试更改class = "medium- 4"，但图片没有调整大小并丢失像素。所以我为iPad创建了新图像，我需要加载该图像。

Answer 1

一种方法是默认隐藏ipad图像，并使用您要定位到ipad设备的媒体查询启用它。

这是用于各种设备/方向的媒体查询的资源。 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

.iPad {
  display: none;
}

/* replace with media query for ipad */
@media (max-width:800px) {
  .desktop {
    display: none;
  }
  .iPad {
    display: block;
  }
}

<div class="medium-5 large-12 columns">
  <img style="padding-top: 20px;padding-left:30px" src="http://kenwheeler.github.io/slick/img/fonz2.png" alt="Back" class="desktop" /> 
  <img style="padding-top: 20px;padding-left:30px" src="http://kenwheeler.github.io/slick/img/fonz3.png" alt="Back" class="desktop iPad"/>
</div>

Answer 2

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

https://www.html5rocks.com/en/tutorials/responsive/picture-element/

如何进行响应式图像设计

2 个答案: