Wie man ein responsives Bilddesign macht

Ich habe den folgenden Code, um ein Bild auf dem Desktop anzuzeigen.Wie man ein responsives Bilddesign macht

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

Ich habe verschiedene Bilder, die angezeigt werden müssen, wenn die gleiche Webseite in iPad auf diese <div> betrachtet wird.

Wie kann ich das tun?

Ich habe versucht, class = "medium- 4" zu ändern, aber das Bild ändert nicht die Größe und verliert Pixel. Also habe ich ein neues Bild für iPad erstellt und ich muss dieses Bild laden.

Quelle

2017-05-23 ISHIDA

Es würde einfacher sein, Ihnen zu helfen, wenn Sie tatsächlich Code schreiben .. – ZombieChowder

dieser clases 'mittel-5', 'groß 12', was sie stehen ? Postleitzahl, wenn möglich – Diego

Medium-5 und large-12 sind Bootstrap-Spalten. Dies ist responsive Design – ISHIDA

Eine Möglichkeit ist, einfach das ipad Bild standardmäßig zu verbergen, und ermöglicht es mit der Abfrage Medien Sie das ipad Gerät ausrichten mögen.

Hier ist eine Ressource für Medienabfragen für verschiedene Geräte/Ausrichtungen. 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>

Quelle

2017-05-23 15:09:08

so eine Overkill-Lösung für ein einfaches Problem in HTML5 abgedeckt, aber ist richtig. Nur für das Bild ist es Overkill, aber Sie können es für einige komplexere Strukturen verwenden –

@EduardVoid stimmte zu. Nur eine andere Art, es zu tun. –

Das ist was ich will. Vielen Dank :) – ISHIDA

<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/

Quelle

2017-05-23 15:06:10

Vielen Dank für die Freigabe. Ich habe das auf meiner anderen Seite implementiert. – ISHIDA

Wie man ein responsives Bilddesign macht

Antwort

Verwandte Themen