Ik probeer nu al een paar dagen om mijn thumbnailgalerij zo te configureren dat alle afbeeldingen dezelfde hoogte en breedte hebben. Wanneer ik de CSS-code echter verander in,
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
Ik krijg afbeeldingen die allemaal even groot zijn, maar de beeldverhouding is uitgerekt, waardoor de afbeeldingen verpest worden. Is er geen manier om het formaat van de afbeeldingscontainer te wijzigen en niet de afbeelding? Hierdoor kan ik de beeldverhouding behouden, maar het formaat van de afbeelding nog wijzigen. (Ik vind het niet erg als ik een deel van de afbeelding afsnijd.)
Antwoord 1, autoriteit 100%
Dit is een bekend probleem met het wijzigen van de grootte van CSS. Tenzij alle afbeeldingen dezelfde verhouding hebben, kun je dit niet via CSS doen.
De beste aanpak zou zijn om een container te hebben en het formaat van een van de (altijd dezelfde) afmetingen van de afbeeldingen te wijzigen. In mijn voorbeeld heb ik de breedte aangepast.
Als de container een gespecificeerde afmeting heeft (in mijn voorbeeld de breedte), zal het de volledige breedte van de container maken wanneer de afbeelding de breedte op 100% moet hebben. De autoop de hoogte zorgt ervoor dat de afbeelding de hoogte heeft die evenredig is aan de nieuwe breedte.
Voorbeeld:
HTML:
<div class="container">
<img src="something.png" />
</div>
<div class="container">
<img src="something2.png" />
</div>
CSS:
.container {
width: 200px;
height: 120px;
}
/* Resize images */
.container img {
width: 100%;
height: auto;
}
Antwoord 2, autoriteit 22%
Je moet één kant vastzetten (bijvoorbeeld de hoogte) en de andere kant instellen op auto.
Bijvoorbeeld
height: 120px;
width: auto;
Dat zou de afbeelding op slechts één zijde schalen. Als u het bijsnijden van de afbeelding acceptabel vindt, kunt u gewoon instellen
overflow: hidden;
naar het bovenliggende element, dat alles zou wegsnijden dat anders groter zou zijn.
Antwoord 3, autoriteit 14%
U kunt de object-fitCSS 3-eigenschap gebruiken. Iets als:
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
.holder {
display: inline;
}
.holder img {
max-height: 200px;
max-width: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<div class='holder'>
<img src='meld.png'>
</div>
<div class='holder'>
<img src='twiddla.png'>
</div>
<div class='holder'>
<img src='meld.png'>
</div>
</body>
</html>Antwoord 4, autoriteit 5%
Om afbeeldingen aanpasbaar/flexibel te maken kun je dit gebruiken:
/* fit images to container */
.container img {
max-width: 100%;
height: auto;
}
Antwoord 5, autoriteit 3%
Zet het als achtergrond op je houder, bijvoorbeeld
<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;">
</div>
Hiermee gaat u uw afbeelding in binnen een 120×120 div-hakken van een overmaat van de afbeelding
Antwoord 6, Autoriteit 2%
Als u het beeld niet wilt uitstrekken, past u deze in een div-container zonder overloop en centreer het door de marge indien nodig aan te passen.
- De afbeelding wordt niet bijgesneden
- De beeldverhouding blijft ook hetzelfde.
HTML
<div id="app">
<div id="container">
<img src="#" alt="something">
</div>
<div id="container">
<img src="#" alt="something">
</div>
<div id="container">
<img src="#" alt="something">
</div>
</div>
CSS
div#container {
height: 200px;
width: 200px;
border: 1px solid black;
margin: 4px;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}
Antwoord 7, Autoriteit 2%
transform: scale(0.5);
Voorbeeld:
<div>Normal</div>
<div class="scaled">Scaled</div>
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
background-color: pink;
}
Zie scale().
Antwoord 8
Dit helpt me om de afbeelding gemakkelijk 150% te maken.
.img-popup img {
transform: scale(1.5);
}
Antwoord 9
Als je de hoogte-breedteverhouding weet, kun je opvulling-bottom met percentage gebruiken om de hoogte in te stellen op basis van de breedte van het verschil.
<div>
<div style="padding-bottom: 33%;">
I have 33% height of my parents width
</div>
</div>