Ich blätterte hier und überall, den ganzen Tag, aber ich kann es nicht herausfinden. Ich werde in Bildern zeigen, statt einer langen Erklärung. Ich bin mit Bootstrap 3. ich eine ansprechende Bild will, wie dies in Desktop zu zeigen und alle anderen Modi und das Bild zu skalieren:Bootstrap 3 - Bild und Spalten im Handy
Aber auf mobiles, statt es zu skalieren, einen Teil zu zeigen, davon.
Verwenden Sie diese Eigenschaft, um Ihr Bild
img
{
max-width:100%;
}
Dies würde funktioniert. Waagen Bild auf ansprechbar
Danke, ich benutze die Klasse img-responsive, aber wie kann man es nicht nur auf Mobilgeräten machen, sondern stattdessen zentriert oder nur einen Teil davon anzeigen? –
hinzufügen img-responsive zu Ihrem img-Tag wie diese
<img class="img-responsive" src="your/img/src">
ich das Bild habe die Einrichtung den gesamten Bildschirm zur Deckung von background-size: cover; und anschließend nur die background-image mit @media mit Haaren aus dem Sumpf xs Darstellungsgröße zu ersetzen . Ich habe gerade die Bilder verwendet, die du gezeigt hast.
HTML
<div id="myid" class="img">
</div>
CSS
#myid {
height:100vh;
width:100%;
background-size:cover;
background-image: url("https://i.stack.imgur.com/WPTL6.jpg");
background-repeat: no-repeat;
}
@media(max-width:767px){
#myid {
height:100vh;
width:100%;
background-size:cover;
background-image: url("https://i.stack.imgur.com/EG1CV.jpg");
background-repeat: no-repeat;
}
einen Blick auf diese jsfiddle nehmen.
https://jsfiddle.net/DTcHh/27113/
Es ist ein wenig schmutzig, wie die Dinge ‚pixelig‘ mit geringerer Qualität Bilder werden kann, aber sollte es tun.
Vielen Dank! Ich habe es gerade überprüft. Die Herausforderung hier ist, dass, wenn es auf Mobilgeräten ist, anstelle der Skalierung, sollte die Mitte des Bildes nicht skaliert angezeigt werden. Auch wenn Fotos nicht reagieren und wir beginnen, den Bildschirm zu skalieren, wird immer der linke Teil des Bildes angezeigt und das rechte verschwindet. Aber wie zentriert man stattdessen das Bild und den linken und rechten Teil gleichermaßen, um zu verschwinden? –
@ the.matrix Sie könnten dem Bild etwas wie 'background-position: center, center;' geben, wenn es sich im 'xs' Viewport-Bereich befindet. Dadurch wird der IMG sowohl vertikal als auch horizontal positioniert. – A1raa
Wo ist Ihr Code? – makshh
Stellen Sie bitte zur Verfügung, was Sie versucht haben. –
Ich habe viele Dinge ausprobiert, die ich online gefunden habe. Ich benutze .img-responsive, die das Bild für lg, md, sm skaliert, aber frage mich, wie man es nicht für xs skalieren und nur einen Teil des Bildes auf vielleicht maximale Höhe für mobile zeigen kann? –