Ik heb een site met veel pagina’s en verschillende achtergrondafbeeldingen, en ik geef ze weer vanuit CSS zoals:
body.page-8 {
background: url("../img/pic.jpg") no-repeat scroll center top #000;
background-size: cover;
}
Ik wil echter verschillende (volledig scherm) afbeeldingen op één pagina tonen met behulp van <img>elementen, en ik wil dat ze dezelfde eigenschappen hebben als de bovenstaande background-image: cover;eigenschap (de afbeeldingen kunnen niet worden weergegeven vanuit CSS, ze moeten worden weergegeven vanuit het HTML-document).
Normaal gebruik ik:
div.mydiv img {
width: 100%;
}
Of:
div.mydiv img {
width: auto;
}
om de afbeelding volledig en responsief te maken. Het beeld krimpt echter te veel (width: 100%) wanneer het scherm te smal wordt, en toont de achtergrondkleur van het lichaam in het onderste scherm. De andere methode, width: auto;, maakt de afbeelding alleen op volledige grootte en reageert niet op de schermgrootte.
Is er een manier om de afbeelding op dezelfde manier weer te geven als background-size: cover?
Antwoord 1, autoriteit 100%
Oplossing #1 – De object-fit eigenschap(Geen IE-ondersteuning)
Stel gewoon object-fit: cover;in op de afbeelding .
body {
margin: 0;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover; /* or object-fit: contain; */
}<img src="https://lorempixel.com/1500/1000" />Antwoord 2, autoriteit 7%
Ervan uitgaande dat je een containerelement kunt regelen dat je wilt vullen, lijkt dit te werken, maar voelt een beetje hackachtig aan. In wezen gebruik ik gewoon min/max-width/heightop een groter gebied en schaal dat gebied vervolgens terug naar de oorspronkelijke afmetingen.
.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>Antwoord 3, autoriteit 7%
Er is eigenlijk een vrij eenvoudige css-oplossingdie zelfs werkt op IE8:
.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="https://placehold.it/200x200" alt="" />
</div>Antwoord 4, autoriteit 5%
Ik heb een eenvoudige oplossing gevonden om zowel omslag als inhoud te emuleren, wat pure CSS is, en werkt voor containers met dynamische afmetingen, en ook geen beperking oplegt aan de beeldverhouding.
Houd er rekening mee dat als u IE of Edge niet vóór 16 jaar hoeft te ondersteunen, u beter object-fit kunt gebruiken.
achtergrondgrootte: omslag
.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>Antwoord 5, autoriteit 2%
Nee, je kunt het niet zo goed krijgen als background-size:covermaar..
Deze benadering komt verdomd dichtbij: het gebruikt JavaScript om te bepalen of de afbeelding liggend of staand is, en past dienovereenkomstig stijlen toe.
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%;
}
Antwoord 6
Wat je zou kunnen doen is het ‘style’ attribuut gebruiken om de achtergrondafbeelding aan het element toe te voegen, op die manier zul je nog steeds de afbeelding in de HTML aanroepen, maar je kunt nog steeds de background-size gebruiken: cover css gedrag:
HTML:
<div class="image-div" style="background-image:url(yourimage.jpg)">
</div>
CSS:
.image-div{
background-size: cover;
}
Zo voeg ik het background-size: cover-gedrag toe aan elementen die ik dynamisch in HTML moet laden. Je kunt dan geweldige css-klassen gebruiken, zoals background-position: center. boem
Antwoord 7
Ik moest background-size: containemuleren, maar kon object-fitniet gebruiken vanwege het gebrek aan ondersteuning. Mijn afbeeldingen hadden containers met gedefinieerde afmetingen en dit werkte uiteindelijk voor mij:
.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="https://placehold.it/300x100">
</div>
<!-- tall -->
<div class="image-container">
<img class="image" src="https://placehold.it/100x300">
</div>Antwoord 8
Met CSS kun je object-fit: [cover|contain];simuleren. Het is gebruik transformen [max|min]-[width|height].
Het is niet perfect.Dat werkt in één geval niet: als de afbeelding breder en korter is dan de container.
.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="https://placehold.it/1000x1000"></span>
</p>
<p>Small square:
<span class="img-ctr"><img class="img" src="https://placehold.it/100x100"></span>
</p>
<p>Large landscape:
<span class="img-ctr"><img class="img" src="https://placehold.it/2000x1000"></span>
</p>
<p>Small landscape:
<span class="img-ctr"><img class="img" src="https://placehold.it/200x100"></span>
</p>
<p>Large portrait:
<span class="img-ctr"><img class="img" src="https://placehold.it/1000x2000"></span>
</p>
<p>Small portrait:
<span class="img-ctr"><img class="img" src="https://placehold.it/100x200"></span>
</p>
<p>Ultra thin portrait:
<span class="img-ctr"><img class="img" src="https://placehold.it/200x1000"></span>
</p>
<p>Ultra wide landscape (images wider and shorter than the container):
<span class="img-ctr"><img class="img" src="https://placehold.it/1000x200"></span>
</p>Antwoord 9
We kunnen de ZOOM-aanpak gebruiken. We kunnen aannemen dat max 30% (of meer tot 100%) het zoomeffect kan zijn als de hoogte OF breedte van het aspectbeeld kleiner is dan de gewenste hoogte OF breedte. We kunnen de rest niet nodig gebied verbergen met overloop: verborgen.
.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%);
}
Hiermee worden afbeeldingen met verschillende breedte OF hoogte aangepast.
Antwoord 10
Probeer zowelmin-heightals min-widthin te stellen met display:block:
img {
display:block;
min-height:100%;
min-width:100%;
}
(viool)
Op voorwaarde dat het bevattende element van uw afbeelding position:relativeof position:absoluteis, zal de afbeelding de container bedekken. Het wordt echter niet gecentreerd.
U kunt de afbeelding gemakkelijk centreren als u weet of deze horizontaal zal overlopen (stel margin-left:-50%in) of verticaal (stel margin-top:-50%). Het is misschien mogelijk om CSS-mediaquery’s (en wat wiskunde) te gebruiken om dat te achterhalen.
Antwoord 11
ik mag geen ‘commentaar toevoegen’ dus dit doen, maar ja, wat Eru Penkman deed is vrijwel perfect, om het als een achtergronddekking te krijgen, hoef je alleen maar te veranderen
.tall-img{
margin-top:-50%;
width:100%;
}
.wide-img{
margin-left:-50%;
height:100%;
}Antwoord 12
Ik weet dat dit oud is, maar veel oplossingen die ik hierboven zie, hebben een probleem met de afbeelding/video die te groot is voor de container, dus niet echt als omslag op achtergrondformaat. Ik besloot echter om “utility classes” te maken, zodat het zou werken voor afbeeldingen en video’s. Je geeft de container gewoon de klasse .media-cover-wrapper en het media-item zelf de klasse .media-cover
Dan heb je de volgende 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
Als u het oproept, zorg er dan voor dat u het formaat van de pagina’s wijzigt:
mediaCoverBounds();
$(window).on('resize', function(){
mediaCoverBounds();
});
Vervolgens de volgende 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, het kan jQuery vereisen, maar het reageert redelijk goed en werkt precies als achtergrondformaat: omslag en je kunt het gebruiken op afbeeldingen en/of video’s om die extra SEO-waarde te krijgen.
Antwoord 13
Voor IE6 moet u ook de tweede regel toevoegen – breedte: 100%;
.mydiv img {
max-width: 100%;
width: 100%;
}
Antwoord 14
background:url('/image/url/') right top scroll;
background-size: auto 100%;
min-height:100%;
kwam exact dezelfde symptomen tegen. bovenstaande werkte voor mij.