Ik heb deze thread gevonden — Hoe rek je een afbeelding uit om een <div> met behoud van de beeldverhouding?— dat is niet helemaal wat ik wil.
Ik heb een div met een bepaalde grootte en een afbeelding erin. Ik wil altijdde div vullen met de afbeelding, ongeacht of de afbeelding liggend of staand is. En het maakt niet uit of de afbeelding is afgesneden (de div zelf heeft een verborgen overloop).
Dus als de afbeelding staand is, wil ik dat de width100%is en de height:autozodat het in verhouding blijft. Als de afbeelding liggend is, wil ik dat de height100%is en de widthauto`. Klinkt ingewikkeld toch?
<div class="container">
<img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>
Omdat ik niet weet hoe ik het moet doen, heb ik eenvoudig een snel beeld gemaakt van wat ik bedoel. Ik kan het niet eens goed beschrijven.
Dus ik denk dat ik niet de eerste ben die dit vraagt. Ik kon hier echter niet echt een oplossing voor vinden. Misschien is er een nieuwe CSS3-manier om dit te doen – ik denk aan flex-box. Enig idee? Misschien is het zelfs wel makkelijker dan ik had verwacht?
Antwoord 1, autoriteit 100%
Als ik goed begrijp wat je wilt, kun je de breedte- en hoogtekenmerken buiten de afbeelding laten om de beeldverhouding te behouden en flexbox gebruiken om het centreren voor je te doen.
.fill {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.fill img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}<div class="fill">
<img src="https://picsum.photos/id/237/320/240" alt="" />
</div>Antwoord 2, autoriteit 36%
Het is een beetje laat, maar ik had net hetzelfde probleem en heb het uiteindelijk opgelost met behulp van een ander stackoverflow-bericht (https://stackoverflow. com/a/29103071).
img {
object-fit: cover;
width: 50px;
height: 100px;
}
Ik hoop dat dit nog steeds iemand helpt.
Ps: werkt ook samen met max-height, max-width, min-widthen min-heightcss-eigenschappen. Het is vooral handig om lengte-eenheden zoals 100%of 100vh/100vwte gebruiken om de container of het hele browservenster te vullen.
Antwoord 3, autoriteit 7%
Alle onderstaande antwoorden hebben een vaste breedte en hoogte, waardoor de oplossing “niet responsief” is.
Om het resultaat te bereiken, maar de afbeelding responsief te houden, heb ik het volgende gebruikt:
- Plaats in de container een transparante gif-afbeelding met de gewenste verhouding
- Geef een afbeeldingstag inline css-achtergrond met de afbeelding die u wilt verkleinen en bijsnijden
HTML:
<div class="container">
<img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div>
.container img{
width: 100%;
height: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Antwoord 4, autoriteit 6%
Dit zou het moeten doen:
img {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
Antwoord 5, autoriteit 4%
Een oude vraag maar verdient een update omdat er nu een manier is.
Het juiste op CSS gebaseerde antwoord is om object-fit: coverte gebruiken, wat werkt als background-size: cover. De positionering wordt verzorgd door het kenmerk object-position, dat standaard is gecentreerd.
Maarer is geen ondersteuning voor in IE / Edge-browsers of Android < 4.4.4. Ook wordt object-positionniet ondersteund door Safari, iOS of OSX. Polyfills bestaan, object-fit-imageslijkt de beste ondersteuning te bieden.
Zie voor meer informatie over hoe de eigenschap werkt het CSS Tricks-artikel op object-fitvoor uitleg en demo.
Antwoord 6, autoriteit 4%
U kunt dit bereiken met behulp van css flex-eigenschappen. Zie de onderstaande code
.img-container {
border: 2px solid red;
justify-content: center;
display: flex;
flex-direction: row;
overflow: hidden;
}
.img-container .img-to-fit {
flex: 1;
height: 100%;
}<div class="img-container">
<img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>Antwoord 7, autoriteit 2%
Hier is een antwoord met ondersteuning voor IE met behulp van object-fitzodat u de verhouding niet verliest
Een eenvoudig JS-fragment gebruiken om te detecteren of de object-fitwordt ondersteund en vervolgens de imgvervangen door een svg
//ES6 version
if ('objectFit' in document.documentElement.style === false) {
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('img[data-object-fit]').forEach(image => {
(image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
})
})
}
//ES5 version
if ('objectFit' in document.documentElement.style === false) {
document.addEventListener('DOMContentLoaded', function() {
Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]').forEach(function(image) {
(image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit'));
image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
}));
});
}img {
display: inline-flex;
width: 175px;
height: 175px;
margin-right: 10px;
border: 1px solid red
}
/*for browsers which support object fit */
[data-object-fit='cover'] {
object-fit: cover
}
[data-object-fit='contain'] {
object-fit: contain
}<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />Antwoord 8
Overweeg het gebruik van background-size: cover(IE9+) in combinatie met background-image. Voor IE8- is er een polyfill.
Antwoord 9
De enige manier waarop ik het beschreven “best case” scenario bereikte, was door de afbeelding als achtergrond te plaatsen:
<div class="container"></div>
.container {
width: 150px;
height: 100px;
background-image: url("https://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Antwoord 10
Probeer dit:
img {
position: relative;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%);
}
Hopelijk helpt dit
Antwoord 11
.image-wrapper{
width: 100px;
height: 100px;
border: 1px solid #ddd;
}
.image-wrapper img {
object-fit: contain;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}<div class="image-wrapper">
<img src="">
</div>Antwoord 12
Een eenvoudige manier die ik bedacht om dit te doen, is door object-fit: coverte gebruiken op de img in de container
<div class="container">
<img class="image" src="https://mymodernmet.com/wp/wp-content/uploads/2020/11/International-Landscape-Photographer-Year-PhotographER-1st-KelvinYuen-2.jpg">
</div>
.image {
height: 100%;
width: 100%;
object-fit: cover
}
.container {
height: 100px; /*Set any dimensions you like*/
width: 50px;
}
Voor zover ik heb getest, werkt dit ongeacht de afmetingen van de afbeelding die moet worden gebruikt, en dit voldoet aan het “Beste geval” zoals u in de vraag aangeeft, aangezien het resultaat verticaal en horizontaal gecentreerd is.
Antwoord 13
Hier heb je mijn werkende voorbeeld. Ik heb een truc gebruikt die de afbeelding instelt als achtergrond van de div-container met background-size:cover en background-position:center center
Ik heb de afbeelding geplaatst met width:100% en opacity:0 waardoor deze onzichtbaar is. Houd er rekening mee dat ik mijn afbeelding alleen laat zien omdat ik een speciale interesse heb in het noemen van de kinderklikgebeurtenis.
Houd er rekening mee dat hoewel ik hoekig gebruik, dit volledig irrelevant is.
<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
<img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
</div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>
Het resultaat is het resultaat dat u in alle gevallen als optimaal definieert
Antwoord 14
U kunt div gebruiken om dit te bereiken. zonder img tag 🙂 hoop dat dit helpt.
.img{
width:100px;
height:100px;
background-image:url('https://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
background-repeat:no-repeat;
background-position:center center;
border:1px solid red;
background-size:cover;
}
.img1{
width:100px;
height:100px;
background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
background-repeat:no-repeat;
background-position:center center;
border:1px solid red;
background-size:cover;
}<div class="img">
</div>
<div class="img1">
</div>Antwoord 15
De CSS object-fit: coveren object-position: left centeronroerend goedwaarden Nu pakken dit probleem aan.
Antwoord 16
Bevestig gewoon de hoogte van de afbeelding & amp; Geef breedte = auto
img{
height: 95vh;
width: auto;
}