Ich habe eine Seite mit vielen Seiten und verschiedenen Hintergrundbildern, und ich zeige sie aus CSS an:
body.page-8 {
background: url("../img/pic.jpg") no-repeat scroll center top #000;
background-size: cover;
}
Ich möchte jedoch verschiedene (Vollbild-) Bilder auf einer Seite mit <img>
-Elementen anzeigen, und ich möchte, dass sie dieselben Eigenschaften wie die obige background-image: cover;
-Eigenschaft haben (die Bilder können nicht aus CSS angezeigt werden, sie müssen aus dem HTML-Dokument angezeigt werden.) .
Normalerweise verwende ich:
div.mydiv img {
width: 100%;
}
Oder:
div.mydiv img {
width: auto;
}
um das Bild voll und ansprechend zu machen. Das Bild wird jedoch zu stark verkleinert (width: 100%
), wenn der Bildschirm zu schmal wird und die Hintergrundfarbe des Körpers im unteren Bildschirmbereich angezeigt wird. Die andere Methode, width: auto;
, macht das Bild nur in voller Größe und reagiert nicht auf die Bildschirmgröße.
Gibt es eine Möglichkeit, das Bild auf dieselbe Weise anzuzeigen wie background-size: cover
?
Setzen Sie einfach object-fit: cover;
im Bild.
body {
margin: 0;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
<img src="http://lorempixel.com/1500/1000" />
Siehe MDN - zu object-fit: cover
:
Der ersetzte Inhalt ist so bemessen, dass das Seitenverhältnis beibehalten wird, während Füllen des gesamten Inhaltsfelds des Elements. Wenn das Seitenverhältnis des Objekts stimmt das Seitenverhältnis der Box nicht überein, dann lautet das Objekt zugeschnitten.
Siehe auch this Codepen Demo , in dem object-fit: cover
, der auf ein Bild angewendet wird, mit background-size: cover
, der auf ein Hintergrundbild angewendet wird, verglichen wird
body {
margin: 0;
}
img {
position: fixed;
width: 0;
height: 0;
padding: 50vh 50vw;
background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
background-size: cover;
}
<img src="http://placehold.it/1500x1000" />
Es gibt eigentlich eine einfache css-Lösung , die sogar auf IE8 funktioniert:
.container {
position: relative;
overflow: hidden;
/* Width and height can be anything. */
width: 50vw;
height: 50vh;
}
img {
position: absolute;
/* Position the image in the middle of its container. */
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
/* The following values determine the exact image behaviour. */
/* You can simulate background-size: cover/contain/etc.
by changing between min/max/standard width/height values.
These values simulate background-size: cover
*/
min-width: 100%;
min-height: 100%;
}
<div class="container">
<img src="http://placehold.it/200x200" alt="" />
</div>
Angenommen, Sie können ein Containerelement einrichten, das Sie füllen möchten. Dies scheint zu funktionieren, fühlt sich aber etwas hackig an. Im Wesentlichen verwende ich min/max-width/height
nur für einen größeren Bereich und skaliere diesen Bereich dann wieder in die ursprünglichen Abmessungen.
.container {
width: 800px;
height: 300px;
border: 1px solid black;
overflow:hidden;
position:relative;
}
.container.contain img {
position: absolute;
left:-10000%; right: -10000%;
top: -10000%; bottom: -10000%;
margin: auto auto;
max-width: 10%;
max-height: 10%;
-webkit-transform:scale(10);
transform: scale(10);
}
.container.cover img {
position: absolute;
left:-10000%; right: -10000%;
top: -10000%; bottom: -10000%;
margin: auto auto;
min-width: 1000%;
min-height: 1000%;
-webkit-transform:scale(0.1);
transform: scale(0.1);
}
<h1>contain</h1>
<div class="container contain">
<img
src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
/>
<!-- 366x200 -->
</div>
<h1>cover</h1>
<div class="container cover">
<img
src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
/>
<!-- 366x200 -->
</div>
Nein, Sie können es nicht ganz wie background-size:cover
bekommen, aber ..
Dieser Ansatz ist ziemlich nahe: Er verwendet JavaScript, um zu bestimmen, ob das Bild Querformat oder Hochformat ist, und wendet Stile entsprechend an.
JS
$('.myImages img').load(function(){
var height = $(this).height();
var width = $(this).width();
console.log('widthandheight:',width,height);
if(width>height){
$(this).addClass('wide-img');
}else{
$(this).addClass('tall-img');
}
});
CSS
.tall-img{
margin-top:-50%;
width:100%;
}
.wide-img{
margin-left:-50%;
height:100%;
}
Ich musste background-size: contain
emulieren, konnte object-fit
jedoch aufgrund fehlender Unterstützung nicht verwenden. Meine Bilder hatten Container mit definierten Abmessungen und das hat für mich funktioniert:
.image-container {
height: 200px;
width: 200px;
overflow: hidden;
background-color: rebeccapurple;
border: 1px solid yellow;
position: relative;
}
.image {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<!-- wide -->
<div class="image-container">
<img class="image" src="http://placehold.it/300x100">
</div>
<!-- tall -->
<div class="image-container">
<img class="image" src="http://placehold.it/100x300">
</div>
Ich habe eine einfache Lösung gefunden, um sowohl das Cover als auch das Containermodul zu emulieren. Dies ist reines CSS und eignet sich für Container mit dynamischen Bemaßungen. Außerdem wird das Bildverhältnis nicht eingeschränkt.
Wenn Sie den IE oder Edge nicht vor 16 unterstützen müssen, verwenden Sie besser die Objektanpassung.
.img-container {
position: relative;
overflow: hidden;
}
.background-image {
position: absolute;
min-width: 1000%;
min-height: 1000%;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) scale(0.1);
z-index: -1;
}
<div class="img-container">
<img class="background-image" src="https://picsum.photos/1024/768/?random">
<p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
Die 1000% werden hier verwendet, wenn die natürliche Größe des Bildes größer ist als die angezeigte Größe. Wenn das Bild beispielsweise 500 x 500 ist, der Container jedoch nur 200 x 200 ist. Bei dieser Lösung wird das Bild auf 2000x2000 (aufgrund von min-width/min-height) verkleinert und anschließend auf 200x200 (aufgrund von transform: scale(0.1)
) verkleinert.
Der x10-Faktor kann durch x100 oder x1000 ersetzt werden. Normalerweise ist es jedoch nicht ideal, wenn ein 2000x2000-Bild auf einem 20x20-Div-Wert gerendert wird. :)
Nach demselben Prinzip können Sie auch background-size: contain
: .__ emulieren.
.img-container {
position: relative;
overflow: hidden;
z-index: 0;
}
.background-image {
position: absolute;
max-width: 10%;
max-height: 10%;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) scale(10);
z-index: -1;
}
<div style="background-color: black">
<div class="img-container">
<img class="background-image" src="https://picsum.photos/1024/768/?random">
<p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
Sie könnten das Attribut 'style' verwenden, um das Hintergrundbild zum Element hinzuzufügen. Auf diese Weise rufen Sie das Bild zwar weiterhin im HTML-Format auf, können jedoch weiterhin das Verhalten von background-size: cover css verwenden:
HTML:
<div class="image-div" style="background-image:url(yourimage.jpg)">
</div>
CSS:
.image-div{
background-size: cover;
}
So füge ich das Element background-size: cover zu Elementen hinzu, die ich dynamisch in HTML laden muss. Sie können dann fantastische CSS-Klassen wie Hintergrundposition verwenden: Zentrum. Boom
Stellen Sie beidemin-height
und min-width
mit display:block
ein:
img {
display:block;
min-height:100%;
min-width:100%;
}
( Geige )
Vorausgesetzt, Ihr Bildelement enthält position:relative
oder position:absolute
, deckt das Bild den Container ab. Es wird jedoch nicht zentriert.
Sie können das Bild leicht zentrieren, wenn Sie wissen, ob es horizontal (margin-left:-50%
) oder vertikal (margin-top:-50%
) überlaufen wird. Es kann möglich sein, CSS-Medienabfragen (und etwas Mathematik) zu verwenden, um dies herauszufinden.
Ich weiß, das ist alt, aber viele Lösungen, die ich oben sehe, haben ein Problem mit dem Bild/Video, das für den Container zu groß ist, so dass er nicht wie ein Cover im Hintergrundformat wirkt. Ich entschied mich jedoch für "Utility-Klassen", damit es für Bilder und Videos funktioniert. Sie geben dem Container einfach die Klasse .media-cover-wrapper und das Medienelement selbst die Klasse .media-cover
Dann haben Sie die folgende jQuery:
function adjustDimensions(item, minW, minH, maxW, maxH) {
item.css({
minWidth: minW,
minHeight: minH,
maxWidth: maxW,
maxHeight: maxH
});
} // end function adjustDimensions
function mediaCoverBounds() {
var mediaCover = $('.media-cover');
mediaCover.each(function() {
adjustDimensions($(this), '', '', '', '');
var mediaWrapper = $(this).parent();
var mediaWrapperWidth = mediaWrapper.width();
var mediaWrapperHeight = mediaWrapper.height();
var mediaCoverWidth = $(this).width();
var mediaCoverHeight = $(this).height();
var maxCoverWidth;
var maxCoverHeight;
if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {
if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
maxCoverWidth = '';
maxCoverHeight = '100%';
} else {
maxCoverWidth = '100%';
maxCoverHeight = '';
} // end if
adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
} else {
adjustDimensions($(this), '100%', '100%', '', '');
} // end if
}); // end mediaCover.each
} // end function mediaCoverBounds
Achten Sie beim Aufrufen darauf, dass Sie die Seitengröße ändern:
mediaCoverBounds();
$(window).on('resize', function(){
mediaCoverBounds();
});
Dann das folgende CSS:
.media-cover-wrapper {
position: relative;
overflow: hidden;
}
.media-cover-wrapper .media-cover {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Ja, es kann jQuery erforderlich sein, aber es reagiert ziemlich gut und verhält sich genau wie Hintergrundgröße: Cover. Sie können es für Bilder und/oder Videos verwenden, um diesen zusätzlichen SEO-Wert zu erhalten.
Wir können den ZOOM-Ansatz verfolgen. Wir können davon ausgehen, dass max. 30% (oder mehr bis zu 100%) der Zoomeffekt sein kann, wenn die Breite des Seitenbildes OR geringer ist als die gewünschte Höhe OR. Den restlichen nicht benötigten Bereich können wir mit Überlauf ausblenden: ausgeblendet.
.image-container {
width: 200px;
height: 150px;
overflow: hidden;
}
.stage-image-gallery a img {
max-height: 130%;
max-width: 130%;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Dadurch werden Bilder mit unterschiedlicher Höhe OR angepasst.
Für IE müssen Sie auch die zweite Zeilenbreite angeben: 100%;
.mydiv img {
max-width: 100%;
width: 100%;
}
Mit CSS können Sie object-fit: [cover|contain];
simulieren. Es verwendet transform
und [max|min]-[width|height]
. Es ist nicht perfekt. Das funktioniert nicht in einem Fall: Wenn das Bild breiter und kürzer als der Container ist.
.img-ctr{
background: red;/*visible only in contain mode*/
border: 1px solid black;
height: 300px;
width: 600px;
overflow: hidden;
position: relative;
display: block;
}
.img{
display: block;
/*contain:*/
/*max-height: 100%;
max-width: 100%;*/
/*--*/
/*cover (not work for images wider and shorter than the container):*/
min-height: 100%;
width: 100%;
/*--*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<p>Large square:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span>
</p>
<p>Small square:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span>
</p>
<p>Large landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span>
</p>
<p>Small landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span>
</p>
<p>Large portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span>
</p>
<p>Small portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span>
</p>
<p>Ultra thin portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span>
</p>
<p>Ultra wide landscape (images wider and shorter than the container):
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span>
</p>
es ist mir nicht erlaubt, einen Kommentar hinzuzufügen, aber ja, was Eru Penkman getan hat, ist ziemlich genau das Richtige
.tall-img{
margin-top:-50%;
width:100%;
}
.wide-img{
margin-left:-50%;
height:100%;
}
ZU
.wide-img{
margin-left:-42%;
height:100%;
}
.tall-img{
margin-top:-42%;
width:100%;
}