CSS forceert het formaat van de afbeelding en behoudt de beeldverhouding

Ik werk met afbeeldingen en ik kwam een ​​probleem tegen met beeldverhoudingen.

<img src="big_image.jpg" width="900" height="600" alt="" />

Zoals je kunt zien, zijn height en width al gespecificeerd. Ik heb een CSS-regel voor afbeeldingen toegevoegd:

img {
  max-width: 500px;
}

Maar voor big_image.jpg ontvang ik width=500 en height=600. Hoe stel ik het formaat van afbeeldingen in, met behoud van hun beeldverhoudingen.


Antwoord 1, autoriteit 100%

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png"> 

Antwoord 2, autoriteit 50%

Ik heb heel hard met dit probleem geworsteld en ben uiteindelijk tot deze eenvoudige oplossing gekomen:

object-fit: cover;
width: 100%;
height: 250px;

Je kunt de breedte en hoogte aanpassen aan je behoeften, en de eigenschap object-fit zal het bijsnijden voor je doen.

Meer informatie over de mogelijke waarden voor de eigenschap object-fit en een compatibiliteitstabel zijn hier beschikbaar: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Proost.


Antwoord 3, autoriteit 29%

Met de onderstaande oplossingen kan de afbeelding omhoog en omlaag worden geschaald, afhankelijk van de breedte van het bovenliggende vak.

Alle afbeeldingen hebben een bovenliggende container met een vaste breedte alleen voor demonstratiedoeleinden. In productie is dit de breedte van de bovenliggende doos.

Beste werkwijze (2018):

Deze oplossing vertelt de browser om de afbeelding weer te geven met de maximale beschikbare breedte en de hoogte aan te passen als een percentage van die breedte.

.parent {
  width: 100px;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Antwoord 4, autoriteit 8%

De eigenschap background-size is alleen ie>=9, maar als u dat goed vindt, kunt u een div gebruiken met background-image en background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Je kunt nu gewoon je div-grootte instellen op wat je maar wilt en niet alleen behoudt de afbeelding zijn beeldverhouding, hij wordt ook zowel verticaal als horizontaal binnen de div gecentraliseerd. Vergeet niet om de maten in de css in te stellen, aangezien div’s het kenmerk width/height niet op de tag zelf hebben.

Deze aanpak is anders dan het antwoord van Setec. Als u dit gebruikt, is het afbeeldingsgebied constant en wordt het door u gedefinieerd (waarbij lege ruimtes horizontaal of verticaal blijven, afhankelijk van de div-grootte en beeldverhouding), terwijl het antwoord van Setec u een vak geeft dat precies de grootte van de geschaalde afbeelding heeft (zonder lege spaties).

Bewerken:
Volgens de MDN-documentatie voor achtergrondgrootte kunt u de eigenschap background-size simuleren in IE8 met behulp van een eigen filterdeclaratie:

Hoewel Internet Explorer 8 de eigenschap background-size niet ondersteunt, is het mogelijk om een ​​deel van zijn functionaliteit te emuleren met behulp van de niet-standaard -ms-filter-functie:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Antwoord 5, autoriteit 7%

Zeer vergelijkbaar met sommige antwoorden hier, maar in mijn geval had ik afbeeldingen die soms groter waren, soms groter.

Deze stijl werkte als een tierelier om ervoor te zorgen dat alle afbeeldingen alle beschikbare ruimte innemen, de verhouding behouden en geen bezuinigingen:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Antwoord 6, autoriteit 3%

Verwijder de eigenschap “height”.

<img src="big_image.jpg" width="900" alt=""/>

Door beide op te geven, wijzigt u de beeldverhouding van de afbeelding. Als je er één instelt, wordt het formaat aangepast, maar blijft de beeldverhouding behouden.

Optioneel, om overmaten te beperken:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Antwoord 7, autoriteit 2%

Firefox 71+ (2019-12-03 ) en Chrome 79+ (2019-12-10) ondersteunen interne toewijzing van de width en height HTML-attributen van het IMG-element naar het nieuwe aspect-ratio CSS-eigenschap (de eigenschap zelf is nog niet beschikbaar voor direct gebruik).

De berekende beeldverhouding wordt gebruikt om ruimte te reserveren voor de afbeelding totdat deze is geladen, en zolang de berekende beeldverhouding gelijk is aan de daadwerkelijke beeldverhouding van de afbeelding, wordt ‘springen’ van pagina’s voorkomen na het laden van de  afbeelding.

Om dit te laten werken, moet een van de twee afbeeldingsdimensies worden overschreven via CSS naar de waarde auto:

IMG {max-width: 100%; height: auto; }
<img src="example.png" width="1280" height="720" alt="Example" />

In het voorbeeld blijft de beeldverhouding van 16:9 (1280:720) behouden, zelfs als de afbeelding nog niet is geladen en de effectieve afbeeldingsbreedte kleiner is dan 1280 als resultaat van max-width: 100%.

Zie ook de gerelateerde Firefox bug 392261.


Antwoord 8

Hier is een oplossing:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

Dit zorgt ervoor dat de afbeelding altijd de hele bovenliggende afbeelding bedekt (verkleinen en omhoog) en dezelfde beeldverhouding behouden.


Antwoord 9

Voeg dit gewoon toe aan je CSS, het zal automatisch krimpen en uitbreiden met behoud van de oorspronkelijke verhouding.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Antwoord 10

Stel de CSS-klasse van uw afbeeldingscontainertag in op image-class:

<div class="image-full"></div>

en voeg dit toe aan je CSS-stylesheet.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Antwoord 11

Als u een responsieve afbeelding wilt behouden en toch wilt afdwingen dat de afbeelding een bepaalde beeldverhouding heeft, kunt u het volgende doen:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

En SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;
  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }
  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Dit kan worden gebruikt om een ​​bepaalde beeldverhouding af te dwingen, ongeacht de grootte van de afbeelding die auteurs uploaden.

Met dank aan @Kseso op http://codepen.io/Kseso/pen/bfdhg . Check deze URL voor meer ratio’s en een werkend voorbeeld.


Antwoord 12

Als u afbeeldingen wilt forceren die in een exact formaat passen, hoeft u niet te veel codes te schrijven. Het is zo eenvoudig

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

Antwoord 13

https://jsfiddle.net/sot2qgj6/3/

Hier is het antwoord als je een afbeelding wilt plaatsen met een vast percentage van de breedte, maar geen vaste pixel van de breedte.

En dit is handig bij het omgaan met verschillende schermgroottes.

De trucs zijn

  1. Gebruik padding-top om de hoogte van de breedte in te stellen.
  2. Gebruik position: absolute om de afbeelding in de opvulruimte te plaatsen.
  3. Gebruik max-height and max-width om ervoor te zorgen dat de afbeelding niet over het bovenliggende element komt.
  4. gebruik display:block and margin: auto om de afbeelding te centreren.

Ik heb ook de meeste trucs in de viool becommentarieerd.


Ik vind ook andere manieren om dit voor elkaar te krijgen.
Er zal geen echte afbeelding in html zijn, dus ik geef persoonlijk het beste antwoord als ik het “img” -element in html nodig heb.

eenvoudige css door achtergrond te gebruiken
http://jsfiddle.net/4660s79h/2/

achtergrondafbeelding met woord bovenaan
http://jsfiddle.net/4660s79h/1/

het concept om positie absoluut te gebruiken komt hier vandaan
http://www.w3schools.com/howto/howto_css_aspect_ratio.asp


Antwoord 14

Voor een responsieve aanpak zou ik aanraden om de Viewport-eenheden en min/max kenmerken als volgt:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Antwoord 15

Dit is mentaal. Gebruik de scale-down eigenschap – het verklaart zichzelf.

Inline-styling:

<img src='/nic-cage.png' style={{ maxWidth: '50%', objectFit: 'scale-down' }} />

Dit voorkomt dat flex het uitrekt. In dit geval zou de afbeelding naar 50% van de breedte van de bovenliggende container gaan en zou de hoogte worden verkleind om overeen te komen.

Houd het simpel.


Antwoord 16

U kunt dit gebruiken:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Antwoord 17

U kunt een div als volgt maken:

<div class="image" style="background-image:url('/to/your/image')"></div>

En gebruik deze css om het op te maken:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Antwoord 18

Hierdoor wordt de afbeelding kleiner als deze te groot is voor een bepaald gebied (als nadeel wordt de afbeelding niet vergroot).

De oplossing van setec is prima voor “Shrink to Fit” in de automatische modus.
Maar om optimaal uit te breiden om in de ‘auto’-modus te passen, moet u eerst de ontvangen afbeelding in een tijdelijke id plaatsen,
Controleer of het in de hoogte of in de breedte kan worden uitgebreid (afhankelijk van de beeldverhouding versus de beeldverhouding van uw weergaveblok),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 
    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

Deze benadering is handig wanneer ontvangen afbeeldingen kleiner zijn dan de weergavebox. U moet ze op uw server opslaan in origineel klein formaat in plaats van in hun uitgebreide versie om uw grotere displaybox te vullen om te besparen op grootte en bandbreedte.


Antwoord 19

Je kunt de container instellen op display: flex en align-items: center (andere align-items waarden werken ook). In plaats van align-items kun je ook align-self op de afbeelding zelf instellen.


Antwoord 20

img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">
<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png"> 

Antwoord 21

Hoe zit het met het gebruik van een pseudo-element voor verticale uitlijning? Deze minder code is voor een carrousel, maar ik denk dat het werkt op elke container met een vast formaat. Het behoudt de beeldverhouding en voegt @grijs-donkere balken bovenaan/onderaan of links/schrijven in voor de kortste afmeting. Ondertussen wordt de afbeelding horizontaal gecentreerd door de tekstuitlijning en verticaal door het pseudo-element.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;
      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }
      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Antwoord 22

Presentatie op volledig scherm:

img[data-attribute] {height: 100vh;}

Houd er rekening mee dat als de hoogte van de kijkpoort groter is dan de afbeelding, de afbeelding natuurlijk verslechtert ten opzichte van het verschil.


Antwoord 23

Als de applicatie een afbeelding kan hebben met een beeldverhouding of resolutie, dan kun je de hoogte en breedte beheren zoals in deze link.

Dit gebruikt Javascript en HTML

https://stackoverflow.com/a/65090175/13338731


Antwoord 24

U kunt gebruiken:-

transform: scaleX(1.2);

om de breedte te wijzigen zonder de hoogte te wijzigen.

En

transform: scaleY(1.2);

om de hoogte te wijzigen zonder de breedte te wijzigen

U kunt dit gebruiken op afbeeldingen en videotags in html en css. Dit verandert ook niets aan de beeldverhouding.

Hopelijk helpt dit 😀


Antwoord 25

Ik denk, ten slotte dat dit de beste oplossing is, eenvoudig en eenvoudig:

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes