Wie man das Bild zu einem Div reparieren, wenn seine Höhe größer als seine Breite ist?

Question

In Facebook, wenn wir Bilder in beliebiger Größe posten, wird es perfekt auf der Timeline angezeigt. Wie machen sie das?

Ich habe folgendes versucht.

1. Einstellung des Bildes als Hintergrund des Div.
2. CSS - Breite: 100%; Höhe: Auto;

Beide haben nicht funktioniert, über den gesamten Stack-Überlauf gibt es keine Option dafür, schließlich beschlossen, dies hinzuzufügen.

Answer 1

Wenn Ihre Mutter div hat Fixmaßen Sie CSS Stufenbilder unter Beibehaltung des Seitenverhältnisses sowohl für Landschaft und Porträt Fotos verwenden können.

Die Bilder passen immer in das Div.

.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    text-align: center; 
 
    background: red; 
 
} 
 

 
img { 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<h1>Landscape</h1> 
 
<div class="container"> 
 
    <img src="https://unsplash.it/1600/800"> 
 
</div> 
 
<h1>Portrait</h1> 
 
<div class="container blue"> 
 
    <img src="https://unsplash.it/800/1600"> 
 
</div>

Answer 2

Auf Facebook zeigen sie keine Bilder als Hintergründe. Bilder werden dort mit dem img-Tag angezeigt. Wenn Sie beobachten, dass die Höhe der Facebook-Bilder voneinander abweichen können, ist die Breite immer gleich. Versuche ein extrem langes Bild zu posten und du wirst das Ding verstehen.

Lösung:

<div> 
    <img src="anysource"> 
</div> 

<style> 
    div{width: 480px;} 
    div img{width: 100%; height: auto} 
</style> 

Answer 3

Ich glaube, Sie für die Skalierung fragen technique.You sollten versuchen, das Bild zu nehmen und haben es also wieder skaliert ändern, es ist in Höhe und Breite mit JavaScript DOM oder CSS und Wieder- lade es auf die Seite hoch.

Ihre erste Lösung hat nicht funktioniert, weil Bilder nicht als Hintergrund gezeigt werden eher mit der.

Answer 4

Asides von allen Antworten, über die css auf tatsächlichen <img> Tags.

Facebook führt alle Uploads auch über ein serverseitiges Skript aus, das die Größenänderung und Komprimierung vornimmt.

Sie haben wahrscheinlich ihren eigenen Hauscode, um dies zu tun, aber Sie können Imagemagick verwenden, um das gleiche zu tun, einschließlich der Größenanpassung und Zuschneiden von Uploads, um immer das gleiche Verhältnis von Breite zu Höhe beizubehalten (zumindest für Thumbnails). http://php.net/manual/en/book.imagick.php

Für eine reine CSS-Option, die Sie in das Hintergrundbild Eigenschaft aussehen könnte, während die Positionierung Argumente verwendet:

können einige Beispiele hier.

Hier ist ein Auszug aus w3cschools.

div {      
Width:100px; 
Height:100px; 
background-image:url('smiley.gif'); 
background-repeat:no-repeat; 
background-position:50% 50%; 
} 

https://www.w3schools.com/cssref/pr_background-position.asp