Responsive Bildgestaltung mit einer eingestellten Höhe

Ich wundere mich, wenn mir jemand mit einem kleinen Problem mit reaktionsschnellen Bildern helfen kann.Responsive Bildgestaltung mit einer eingestellten Höhe

Ich habe eine Höhe, ich möchte mein Bild sein. 200 px und etwa 100% der Breite des Containers. Das schafft das Problem, dass die Bilder gestreckt sind und nicht gut aussehen. Ich wüsste, wenn ich irgendwie die Bilder behalten kann, die Verhältnisse halten und immer noch gut aussehen. kann ich einen Behälter mit einer bestimmten Höhe um ihn herum haben und so machen, dass der Überlauf hinter jedem Ding oben und unten versteckt ist und wie mache ich das am einfachsten?

How the site looks atm

Alle anderen sugestions wie ich das Problem lösen kann?

Quelle

2016-05-18 Johan H

mit Bitte Code schreiben. – super11

Sie können 'background-size: cover' verwenden. Überprüfen Sie diese [** link **] (https://css-tricks.com/almanac/properties/b/background-size/) – Pugazh

width: auto, höhe: 200px. Rand: 0 automatisch –

Die Art, wie Sie dieses Problem lösen, ist falsch. Sie können keine Einschränkung sowohl für height als auch für width festlegen und das Seitenverhältnis des Bildes beibehalten.

Wie für diesen Fall, sollten Sie diese CSS:

img { 
    height: 200px; 
    width: auto; 
}

Quelle

2016-05-18 07:52:12 activatedgeek

Es gibt ein CSS-Attribut namens background-size, die ich normalerweise für Situationen wie diese verwendet werden. background-size kombiniert mit background-position könnte das sein, was Sie suchen. Beispiel unten.

body { 
 
    margin: 0; 
 
    background-color: #CCCCCC; 
 
} 
 

 
.container { 
 
    width: 500px; 
 
    margin: 15px auto; 
 
    padding: 15px; 
 
    background-color: #FFFFFF; 
 
} 
 

 
.hero { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-image: url('http://www.redcross.org/images/MEDIA_CustomProductCatalog/m17844381_TheHero_763x260_PRE.JPG'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="hero"></div> 
 
    <div class="content"> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    </div> 
 
</div>

In meinem Beispiel ist das „Held“ Bild in 763x260px und die div-Containern, die es 470x200px angezeigt wird, aber sie paßt immer noch in dem „besten Weg“, um es Behälter ist.

Quelle

2016-05-18 07:52:42 thepio

Sie können es leicht tun, indem background-size:cover

Quelle

2016-05-18 08:41:33

Responsive Bildgestaltung mit einer eingestellten Höhe

Antwort

Verwandte Themen