Geben richtige Breite Ausgabe

Question

Ich versuche, die Breite und Höhe meines Bildes für kleine Geräte zu reduzieren, aber ohne Erfolg ... Warum verliere ich die Hälfte des Bildes, wenn ich versuche, die Breite für ex zu ändern. ? Sagen wir, ich möchte es 50x100 oder 70x60 machen, wie ich die gesamte Bildstruktur behalten kann, ohne sie zu schneiden? Hier ist Beispiel meines Code

.logo { width: 100px; height: 100px; margin: 39px 0 0 3px; } 
 
.logo a { display: block; height: 100%; background: url(https://i.downloadatoz.com/download/icon2/e/9/1/58ad7b4d1acbb54cd382e152b3a6619e.jpg) no-repeat 0 0; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; }

<div class="logo"> 
 
    <a href="#">Book Store</a> 
 
</div>

Answer 1

diesen Code Versuchen .. Statt Breite und Höhe Angabe verwendet Hintergrund-size Attribut.

.logo { width: 100px; height: 100px; margin: 39px 0 0 3px; } 
 
.logo a { display: block; height: 100%; background: url(https://i.downloadatoz.com/download/icon2/e/9/1/58ad7b4d1acbb54cd382e152b3a6619e.jpg) no-repeat 0 0; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; 
 
background-size:50px 50px;}

<div class="logo"> 
 
    <a href="#">Book Store</a> 
 
</div>

Answer 2

Während die Schnipsel Sie nicht zur Verfügung gestellt nicht wirklich helfen uns, das Problem zu zeigen, ich glaube, Sie suchen die CSS-Eigenschaft background-size: contain.

Dokumentation hier (etwa ein Viertel des Weges nach unten auf der Seite): https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Beispiel hier: http://www.w3schools.com/CSSref/playit.asp?filename=playcss_background-size&preval=contain