レスポンシブな画像デザインを行うには

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> 

私は、同じウェブページはこの<div>へのiPadで表示されたときに表示する必要が異なる画像を持っています。

どうすればいいですか？

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/