Wijzig beeld evenredig met CSS? [DUPLICEER]

Is er een manier om afbeeldingen te wijzigen (schaallaag) proportioneel met alleen CSS?

Ik doe de JavaScript-manier, maar probeer gewoon te zien of dit mogelijk is met CSS.

Antwoord 1, Autoriteit 100%

Om het formaat van het beeld te wijzigen evenredig met behulp van CSS:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

Antwoord 2, Autoriteit 32%

Besturingsgrootte en aandeel aandeel:

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

Antwoord 3, Autoriteit 15%

Als het een achtergrondafbeelding is, gebruik dan achtergrondformaat: bevatten.

Voorbeeld CSS:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

Antwoord 4, Autoriteit 10%

Probeer

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

Antwoord 5, Autoriteit 8%

U kunt Object-Fit Property gebruiken:

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

Dit past op afbeelding, zonder de proportioneel te veranderen.

Antwoord 6, Autoriteit 7%

Merk op dat width:50%zal aanpassen naar 50% van de beschikbare ruimte aan de afbeelding, terwijl max-width:50%zal het beeld aanpassen naar 50% van de natuurlijke grootte . Dit is zeer belangrijk om rekening te houden bij het gebruik van deze regels voor het mobiele web design, dus voor mobiele web design max-widthmoeten altijd worden gebruikt.

UPDATE:. Dit was waarschijnlijk een oude Firefox bug, dat lijkt te zijn opgelost door nu

Antwoord 7, Autoriteit 6%

Een afbeelding schalen door hem een ​​aspectverhouding

Probeer deze,

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

Antwoord 8, Autoriteit 4%

Revisited in 2015:

<img src="https://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

Ik heb het herzien als alle gangbare browsers nu werken auto voorgesteld door Cherif boven, zodat de werken nog beter als je niet hoeft te weten of afbeelding breder is dan groter.

oudere versie:
Als u beperkt door doos van 120×100 je bijvoorbeeld kunt doen

<img src="https://image.url" height="100" style="max-width: 120px">

Antwoord 9, Autoriteit 3%

De CSS-eigenschappen max-width en max-height werk grote , maar worden niet ondersteund door IE6 en ik geloof IE7. Je zou willen dit over hoogte / breedte gebruiken, zodat je niet per ongeluk schalen van een beeld op. Je zou willen gewoon de maximale hoogte te beperken / breedte verhouding.

Antwoord 10, Autoriteit 3%

<img style="width: 50%;" src="..." />

werkte prima voor mij … Of mis ik iets?

Bewerken:Maar zie Shawn’s waarschuwing over het per ongeluk vergroten van de maat.

Antwoord 11, autoriteit 2%

img{
    max-width:100%;
    object-fit: scale-down;
}

werkt voor mij. Het verkleint grotere afbeeldingen zodat ze in het vak passen, maar laat kleinere afbeeldingen hun oorspronkelijke grootte.

Antwoord 12, autoriteit 2%

Ik geloof dat dit de gemakkelijkste manier is om het te doen, ook mogelijk met behulp van het inline styleattribuut binnen de <img>tag.

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}
<img src="flower.png" class="scaled">

of

<img src="flower.png" style="transform: scale(0.7);">

Antwoord 13, autoriteit 2%

Gebruik deze eenvoudige schaaltechniek

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

Antwoord 14

img {
    max-width:100%;
}
div {
    width:100px;
}

met dit fragment kun je het op een efficiëntere manier doen

Antwoord 15

We kunnen het formaat van afbeeldingen wijzigen met CSS in de browser met behulp van mediaquery’s en het principe van responsief ontwerp.

   @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}

html
{
    width: 100%;
    height: 100%;
}

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}
/* resize images */
div.container img {
    width: 100%;
    height: auto;
}