Hoe pas je het formaat van een grote afbeelding automatisch aan, zodat deze in een div-container met een kleinere breedte past, terwijl de verhouding breedte:hoogte behouden blijft?
Voorbeeld: stackoverflow.com – wanneer een afbeelding in het editorpaneel wordt ingevoegd en de afbeelding is te groot om op de pagina te passen, wordt de afbeelding automatisch verkleind.
Antwoord 1, autoriteit 100%
Pas geen expliciete breedte of hoogte toe op de afbeeldingstag. Geef het in plaats daarvan:
max-width:100%;
max-height:100%;
Ook height: auto;als u alleen een breedte wilt opgeven.
Voorbeeld: http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}Portrait Div
<div class="portrait">
<img src="https://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="https://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="https://i.stack.imgur.com/xkF9Q.jpg">
</div>Antwoord 2, autoriteit 25%
Het blijkt dat er een andere manier is om dit te doen.
<img style='height: 100%; width: 100%; object-fit: contain'/>
zal het werk doen. Het zijn CSS 3-dingen.
Fiddle: http://jsfiddle.net/mbHB4/7364/
Antwoord 3, autoriteit 5%
Momenteel is er geen manier om dit op een deterministische manier correct te doen, met afbeeldingen van een vast formaat, zoals JPEG’s of PNG-bestanden.
Als u het formaat van een afbeelding proportioneel wilt wijzigen, moet u ofwelde hoogte of breedte instellen op “100%”, maar niet beide.Als u beide instelt op “100% “, uw afbeelding wordt uitgerekt.
Kiezen voor hoogte of breedte hangt af van de afmetingen van uw afbeelding en container:
- Als je afbeelding en container beide ‘staand’ of beide ‘liggend’ zijn (respectievelijk groter dan breed of breder dan hoog), maakt het niet uit welke hoogte of breedte ‘ %100″.
- Als je afbeelding staand is en je container liggend, moet je
height="100%"op de afbeelding instellen. - Als je afbeelding liggend is en je container staand, moet je
width="100%"op de afbeelding instellen.
Als uw afbeelding een SVG is, wat een vectorafbeeldingsindeling van variabele grootte is, kunt u de uitbreiding automatisch laten plaatsvinden zodat deze in de container past.
Je moet er alleen voor zorgen dat het SVG-bestand geen van deze eigenschappen heeft die zijn ingesteld in de <svg>-tag:
height
width
viewbox
De meeste vectortekenprogramma’s die er zijn, stellen deze eigenschappen in bij het exporteren van een SVG-bestand, dus u zult uw bestand elke keer dat u exporteert handmatig moeten bewerken of een script moeten schrijven om dit te doen.
Antwoord 4, autoriteit 4%
Hier is een oplossing die uw img zowel verticaal als horizontaal uitlijnt binnen een div zonder uit te rekken, zelfs als de geleverde afbeelding te klein of te groot is om in de div te passen.
De HTML-inhoud:
<div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
De CSS-inhoud:
#myDiv
{
height: 104px;
width: 140px;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
Het jQuery-gedeelte:
var logoHeight = $('#myDiv img').height();
if (logoHeight < 104) {
var margintop = (104 - logoHeight) / 2;
$('#myDiv img').css('margin-top', margintop);
}
Antwoord 5, autoriteit 2%
Maak het eenvoudig!
Geef de container een vasteheighten stel voor de img-tag erin widthen max-height.
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
Het verschil is dat je de widthinstelt op 100%, niet de max-width.
Antwoord 6, autoriteit 2%
Je hebt twee manieren om de afbeelding responsief te maken.
-
Als een afbeelding een achtergrondafbeelding is.
#container{ width: 300px; height: 300px; background-image: url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } <div id="container"><div>Voer het hier
uit
Maar men moet de tag
imggebruiken om afbeeldingen te plaatsen, aangezien dit beter is danbackground-imagein termen van SEOzoals u kunt schrijven keywordin dealtvan deimg-tag. Dus hier kun je de afbeelding responsief maken. -
Als de afbeelding in de
img-tag staat.#container{ max-width: 400px; overflow: hidden; } img{ width: 100%; object-fit: contain; } <div id="container"> <img src="https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/> <div>Voer het hier
uit
Antwoord 7
Je kunt de afbeelding instellen als achtergrond voor een div en vervolgens de CSS-achtergrond gebruiken -size eigenschap:
background-size: cover;
Het zal “Schaal de achtergrondafbeelding zo groot mogelijk zodat het achtergrondgebied volledig wordt bedekt door de achtergrondafbeelding. Sommige delen van de achtergrondafbeelding zijn mogelijk niet zichtbaar binnen het achtergrondpositioneringsgebied”— W3Schools
Antwoord 8
Bekijk mijn oplossing: http://codepen.io/petethepig/pen/dvFsA
Het is geschreven in pure CSS, zonder enige JavaScript-code.
Het kan afbeeldingen van elk formaat en elke richting aan.
Gezien dergelijke HTML:
<div class="image">
<div class="trick"></div>
<img src="https://placekitten.com/415/200"/>
</div>
de CSS-code zou zijn:
.image {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.trick {
display: inline-block;
vertical-align: middle;
height: 150px;
}
Antwoord 9
Ik heb zojuist een jQuery-plug-in gepubliceerd die precies doet wat je nodig hebt met veel opties:
https://github.com/GestiXi/image-scale
Gebruik:
HTML
<div class="image-container">
<img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>
JavaScript
$(function() {
$("img.scale").imageScale();
});
Antwoord 10
Deze oplossing rekt de afbeelding niet uit en vult de hele container, maar snijdt een deel van de afbeelding.
HTML:
<div><img src="/images/image.png"></div>
CSS:
div {
width: 100%;
height: 10em;
overflow: hidden;
img {
min-width: 100%;
min-height: 100%;
}
Antwoord 11
Ik zie dat veel mensen object-fithebben voorgesteld, wat een goede optie is. Maar als u wilt dat het ook in oudere browserswerkt, is er een andere manier om dit gemakkelijk te doen.
Het is vrij eenvoudig. De benadering die ik nam was om de afbeelding in de container te plaatsen met absoluuten dan het midden in het midden te plaatsenmet de combinatie:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Zodra het in het midden staat, geef ik aan de afbeelding,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
Hierdoor krijgt de afbeelding het effect van object-fit:cover.
Hier is een demonstratie van de bovenstaande logica.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Deze logica werkt in alle browsers.
Antwoord 12
Ik heb een veel betere oplossing zonder JavaScript. Het is volledig responsive en ik gebruik het veel. Vaak moet u een afbeelding met een bepaalde beeldverhouding aanpassen aan een containerelement met een bepaalde beeldverhouding. En dit ding volledig responsive hebben is een must.
/* For this demo only */
.container {
max-width: 300px;
margin: 0 auto;
}
.img-frame {
box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
background: #ee0;
margin: 20px auto;
}
/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
position: relative;
}
.aspect-ratio-1-1 {
padding-bottom: 100%;
}
.aspect-ratio-4-3 {
padding-bottom: 75%;
}
.aspect-ratio-16-9 {
padding-bottom: 56.25%;
}
/* This is the key part - position and fit the image to the container */
.fit-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 80%;
max-height: 90%
}
.fit-img-bottom {
top: auto;
}
.fit-img-tight {
max-width: 100%;
max-height: 100%
}<div class="container">
<div class="aspect-ratio aspect-ratio-1-1 img-frame">
<img src="//placehold.it/400x300" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-4-3 img-frame">
<img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="//placehold.it/400x400" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
</div>
</div>Antwoord 13
Ik heb dit probleem opgelost met de volgende code:
<div class="container"><img src="image_url" /></div>
.container {
height: 75px;
width: 75px;
}
.container img {
object-fit: cover;
object-position: top;
display: block;
height: 100%;
width: 100%;
}
Antwoord 14
Het volgende werkt perfect voor mij:
img{
height: 99999px;
object-fit:contain;
max-height: 100%;
max-width: 100%;
display: block;
margin: auto auto;
}
Antwoord 15
<style type="text/css">
#container{
text-align: center;
width: 100%;
height: 200px; /* Set height */
margin: 0px;
padding: 0px;
background-image: url('../assets/images/img.jpg');
background-size: content; /* Scaling down large image to a div */
background-repeat: no-repeat;
background-position: center;
}
</style>
<div id="container>
<!-- Inside container -->
</div>
Antwoord 16
Zoals hier beantwoord, kunt u ook vh-eenheden gebruiken in plaats van max-height: 100%als het niet werkt in je browser (zoals Chrome):
img {
max-height: 75vh;
}
Antwoord 17
Ik heb een afbeelding in een hyperlink zowel horizontaal als verticaal op deze manier gecentreerd en proportioneel geschaald:
#link {
border: 1px solid blue;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
#link img {
border: 1px solid red;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 60px;
max-width: 60px;
}
Het is getest in Internet Explorer, Firefox en Safari.
Meer informatie over centreren vindt u hier.
Antwoord 18
Geef de hoogte en breedte die je nodig hebt voor je afbeelding aan de div die de <img> label. Vergeet niet de hoogte/breedte in de juiste stijltag op te geven.
In de <img> tag, geef de max-heighten max-width100%.
<div style="height:750px; width:700px;">
<img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>
Je kunt de details in de juiste klassen toevoegen nadat je het goed hebt gedaan.
Antwoord 19
De onderstaande code is aangepast van eerdere antwoorden en is door mij getest met behulp van een afbeelding genaamd storm.jpg.
Dit is de volledige HTML-code voor een eenvoudige pagina waarop de afbeelding wordt weergegeven. Dit werkt perfect en is door mij getest met www.resizemybrowser.com. Zet de CSS-code bovenaan je HTML-code, onder je hoofdgedeelte. Plaats de afbeeldingscode waar u de afbeelding wilt hebben.
<html>
<head>
<style type="text/css">
#myDiv
{
height: auto;
width: auto;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</body>
</html>
Antwoord 20
Je moet de browser vertellen hoe hoog je hem plaatst:
.example {
height: 220px; /* DEFINE HEIGHT */
background: url('../img/example.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
Antwoord 21
Bewerken:eerdere op tabellen gebaseerde afbeeldingspositionering had problemen in Internet Explorer 11 (max-heightwerkt niet in display:tableelementen). Ik heb het vervangen door inline-gebaseerde positionering, wat niet alleen prima werkt in zowel Internet Explorer 7 als Internet Explorer 11, maar er is ook minder code voor nodig.
Hier is mijn mening over het onderwerp. Het werkt alleen als de container een gespecificeerde grootte heeft (max-widthen max-heightlijken niet overeen te komen met containers die geen concrete grootte hebben ), maar ik heb de CSS-inhoud zo geschreven dat deze opnieuw kan worden gebruikt (voeg picture-frameclass en px125size class toe aan uw bestaande container).
In CSS:
.picture-frame
{
vertical-align: top;
display: inline-block;
text-align: center;
}
.picture-frame.px125
{
width: 125px;
height: 125px;
line-height: 125px;
}
.picture-frame img
{
margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}
En in HTML:
<a href="#" class="picture-frame px125">
<img src="https://i.imgur.com/lesa2wS.png"/>
</a>
DEMO
Antwoord 22
De geaccepteerd antwoord van Thorn007werkt niet wanneer de afbeelding te klein is.
Om dit op te lossen heb ik een schaalfactortoegevoegd. Op deze manier wordt de afbeelding groter en wordt de div-container gevuld.
Voorbeeld:
<div style="width:400px; height:200px;">
<img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>
Opmerkingen:
- Voor WebKit moet u
-webkit-transform:scale(4); -webkit-transform-origin:left top;in de stijl. - Met een schaalfactor van 4 heb je max-width = 400/4 = 100 en max-height = 200/4 = 50
- Een alternatieve oplossing is om de maximale breedte en maximale hoogte in te stellen op 25%. Het is nog eenvoudiger.
Antwoord 23
Een eenvoudige oplossing (4-stappen oplossing!!) die voor mij lijkt te werken, staat hieronder. Het voorbeeld gebruikt de breedte om de totale grootte te bepalen, maar je kunt het ook omdraaien om in plaats daarvan de hoogte te gebruiken.
- Css-stijl toepassen op de afbeeldingscontainer (bijvoorbeeld <img>)
- Stel de eigenschap width in op de gewenste afmeting
- Gebruik voor afmetingen
%voor relatieve grootte of automatisch schalen (op basis van afbeeldingscontainer of weergave) - Gebruik
px(of iets anders) voor een statische of vaste dimensie
- Gebruik voor afmetingen
- Stel de eigenschap height in om automatisch aan te passen, op basis van de breedte
- GENIETEN!
Bijvoorbeeld
<img style="width:100%; height:auto;"
src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
Antwoord 24
Een eenvoudige oplossing is om Flexboxte gebruiken. Definieer de CSS van de container als volgt:
.container{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
overflow: hidden;
/* Any custom height */
}
Pas de breedte van de ingesloten afbeelding aan tot 100% en u zou een mooie gecentreerde afbeelding in de container moeten krijgen met behoud van de afmetingen.
Antwoord 25
Alle gegeven antwoorden, inclusief de geaccepteerde, werken alleenin de veronderstelling dat de DIV-wrapper een vaste grootte heeft. Dus dit is hoe het te doen ongeachtde grootte van de DIVwrapper is en dit is erg handig als u een responsieve pagina ontwikkelt:
Schrijf deze verklaringen in uw DIVselector:
width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */
Plaats deze verklaringen vervolgens in uw img-selector:
width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */
HEEL BELANGRIJK:
De waarde van maxHeightmoet dezelfdezijn voor zowel de DIVals img-kiezers.
Antwoord 26
Als je Bootstrap gebruikt, hoef je alleen de klasse img-responsivetoe te voegen aan de tag img:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Antwoord 27
De oplossing is eenvoudig met een beetje wiskunde…
Plaats de afbeelding gewoon in een div en vervolgens in het HTML-bestand waarin u de afbeelding opgeeft. Stel de breedte- en hoogtewaarden in procenten in met behulp van de pixelwaarden van de afbeelding om de exacte verhouding tussen breedte en hoogte te berekenen.
Stel dat je een afbeelding hebt met een breedte van 200 pixels en een hoogte van 160 pixels. Je kunt gerust zeggen dat de breedtewaarde 100% zal zijn, omdat dit de grotere waarde is. Om vervolgens de hoogtewaarde te berekenen, deelt u eenvoudig de hoogte door de breedte, wat de procentuele waarde van 80% oplevert. In de code ziet het er ongeveer zo uit…
<div class="image_holder_div">
<img src="some_pic.png" width="100%" height="80%">
</div>
Antwoord 28
De eenvoudigste manier om dit te doen is door object-fitte gebruiken:
<div class="container">
<img src="path/to/image.jpg">
</div>
.container{
height: 300px;
}
.container img{
height: 100%;
width: 100%;
object-fit: cover;
}
Als u Bootstrap gebruikt, voegt u gewoon de klasse img-responsivetoe en wijzigt u in
.container img{
object-fit: cover;
}
Antwoord 29
Er zijn verschillende manieren om de afbeeldingaan te passen aan <div>.
img {
object-fit: cover;
}
De CSS object-fiteigenschap wordt gebruikt om aan te geven hoe een <img>of <video>moet worden aangepast om te passen zijn container.
Deze eigenschap vertelt de inhoud om de container op verschillende manieren te vullen; zoals “behoud die beeldverhouding” of “rek uit en neem zoveel mogelijk ruimte in”.
- vul – Dit is standaard. Het formaat van de afbeelding wordt aangepast om de opgegeven dimensie te vullen. Indien nodig wordt de afbeelding uitgerekt of geplet om te passen
- bevatten – De afbeelding behoudt zijn hoogte-breedteverhouding, maar wordt verkleind om binnen de opgegeven afmeting te passen
- omslag – De afbeelding behoudt zijn hoogte-breedteverhouding en vult de opgegeven dimensie. De afbeelding wordt bijgesneden om te passen
- geen – Het formaat van de afbeelding is niet aangepast
- verkleinen – de afbeelding wordt verkleind tot de kleinste versie van geen of bevat
Meer werkende voorbeelden vind je hier.
Antwoord 30
Controleer mijn antwoord, Maak een afbeelding responsief – eenvoudigst manier–
img{
width: 100%;
max-width: 800px;
}