Wie kann ich mit CSS die Größe eines Bildes auf einen Prozentsatz von sich selbst ändern?

Lesezeit: 6 Minuten

Benutzeravatar von Min Ming Lo
Min Ming Lo

Ich versuche, die Größe eines Bildes mit einem Prozentsatz von sich selbst zu ändern. Zum Beispiel möchte ich das Bild nur um die Hälfte verkleinern, indem ich die Größe auf 50 % ändere. Aber bewerben width: 50%; ändert die Größe des Bildes auf 50 % des Containerelements (das übergeordnete Element, das möglicherweise die <body> zum Beispiel).

Die Frage ist, kann ich die Größe des Bildes mit einem Prozentsatz von sich selbst ändern, ohne JavaScript oder die Serverseite zu verwenden? (Ich habe keine direkten Informationen zur Bildgröße)

Ich bin mir ziemlich sicher, dass Sie dies nicht tun können, aber ich möchte nur sehen, ob es nur intelligente CSS-Lösungen gibt. Vielen Dank!

  • Es nimmt den Prozentsatz des enthaltenden Elements ein, wenn Sie es verwenden würden width: <number>%. Ich glaube nicht, dass es eine Möglichkeit gibt!

    – Aniket

    6. Dezember 2011 um 8:45 Uhr

Benutzeravatar von Vladimir Starkov
Wladimir Starkow

Ich habe 2 Methoden für Sie.

Methode 1.

Diese Methode ändert die Bildgröße nur visuell, nicht in den tatsächlichen Abmessungen im DOM, und der visuelle Zustand nach der Größenänderung wird in der Mitte der Originalgröße zentriert.

img {
  transform: scale(0.5);
}
<img src="https://via.placeholder.com/300x200" />

Hinweis zur Browserunterstützung: Browserstatistiken wurden inline angezeigt css.

Methode 2.

#wrap {
  overflow: hidden;
  position: relative;
  float: left;
}

#wrap img.fake {
  float: left;
  visibility: hidden;
  width: auto;
}

#img_wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#img_wrap img.normal {
  width: 50%;
}
<div id="wrap">
  <img class="fake" src="https://via.placeholder.com/300x200" />
  
  <div id="img_wrap">
    <img class="normal" src="https://via.placeholder.com/300x200/cccccc" />
  </div>
</div>

Notiz: img.normal und img.fake ist das gleiche Bild.
Hinweis zur Browserunterstützung: Diese Methode funktioniert in allen Browsern, da alle Browser sie unterstützen css Eigenschaften, die in der Methode verwendet werden.

Die Methode funktioniert so:

  1. #wrap und #wrap img.fake Strömung haben
  2. #wrap hat overflow: hidden so dass seine Abmessungen mit dem inneren Bild identisch sind (img.fake)
  3. img.fake ist das einzige Element im Inneren #wrap ohne absolute Positionieren, damit es den zweiten Schritt nicht bricht
  4. #img_wrap hat absolute innen positionieren #wrap und erstreckt sich in der Größe auf das gesamte Element (#wrap)
  5. Das Ergebnis des vierten Schritts ist das #img_wrap hat die gleichen Abmessungen wie das Bild.
  6. Indem man es einstellt width: 50% an img.normalseine Größe ist 50% von #img_wrapund deshalb 50% der ursprünglichen Bildgröße.

  • Dadurch wird das Bild nicht auf 50 % seiner Originalgröße skaliert, es entspricht jetzt 50 % dem übergeordneten Element von img_wrap.

    – Wesley

    25. Mai 2012 um 9:46 Uhr

  • Siehe meine aktualisierte Antwort für einen Versuch, das Problem zu lösen. Was denkst du?

    – Wesley

    25. Mai 2012 um 10:22 Uhr

  • Ich denke, es sollte möglich sein, display:none anstelle der Sichtbarkeit zu verwenden, wie in meinem Code. In Ihrem Beispiel ist der Platz für das gefälschte versteckte Bild immer noch „reserviert“, was den Fluss vermasselt, wenn Sie Inhalte darum herum platzieren würden

    – Wesley

    25. Mai 2012 um 10:35 Uhr

  • es ist unmöglich, weil der Haupttrick in zwei verschachtelten und schwebenden Tags besteht.

    – Wladimir Starkow

    25. Mai 2012 um 11:08 Uhr

  • Das transform:scale() Die Lösung hat jedoch ein großes Problem. Es interagiert nicht gut mit dem CSS-Box-Modell. Damit meine ich, dass es nicht damit interagiert überhaupt, so dass Sie ein Layout erhalten, das völlig falsch aussieht. Sehen: jsfiddle.net/kahen/sGEkt/8

    – Kahen

    4. Februar 2013 um 15:11 Uhr


Dies muss eine der einfachsten Lösungen sein, die den Container-Element-Ansatz verwenden.

Bei Verwendung des Containerelement-Ansatzes ist diese Frage eine Variation dieser Frage. Der Trick besteht darin, das Containerelement das untergeordnete Bild verkleinern zu lassen, sodass es eine Größe hat, die der des nicht angepassten Bildes entspricht. Also beim Einstellen width Eigenschaft des Bildes als Prozentwert, wird das Bild relativ zu seinem Originalmaßstab skaliert.

Einige der anderen Eigenschaften und Eigenschaftswerte, die das Schrumpfen ermöglichen, sind: float: left/right, position: fixed und min/max-width, wie in der verknüpften Frage erwähnt. Jeder hat seine eigenen Nebenwirkungen, aber display: inline-block wäre die sicherere Wahl. Matt hat erwähnt float: left/right in seiner Antwort, aber er hat es fälschlicherweise darauf zurückgeführt overflow: hidden.

span {
  display: inline-block;
}

img {
  width: 50%;
}
<span>
        <img src="https://via.placeholder.com/300x200"/>
    </span>

Bearbeiten: Wie von Trojan erwähnt, können Sie auch die neu eingeführten Vorteile nutzen CSS3 intrinsisches und extrinsisches Größenanpassungsmodul:

figure {
  width: intrinsic;
}

img {
  width: 50%;
}
<figure>
  <img src="https://via.placeholder.com/300x200" />
</figure>

Jedoch, Zum Zeitpunkt des Schreibens wird dies nicht von allen gängigen Browserversionen unterstützt.

  • @Jemand, wie man nicht zusammenbrechende Spannweitengrenzen repariert? Geige

    – AdR

    7. April 2015 um 14:32 Uhr

  • Das war genau das, was ich brauchte … etwas schnelles und einfaches, danke. Ich habe es so verwendet: HTML: <img src="https://www.google.com/images/srpr/logo11w.png"/> CSS: img { display: inline-block; width: 15%; }

    – Chnikki

    20. Juni 2018 um 21:14 Uhr

  • Für zukünftige Leser: der richtige Wert zum Einstellen figure ist width: fit-content; ab sofort. Auch die Browserunterstützung ist heute viel besser.

    – Dániel Kis-Nagy

    18. Februar 2020 um 11:06 Uhr

  • was meinen Sie max-content?

    – aindurti

    24. August 2021 um 22:48 Uhr

Benutzeravatar von Emir Akaydın
Emir Akaydin

Bild skalieren:

img {
  transform: scale(0.5);
}
<img src="https://via.placeholder.com/300x200" />

Eine andere Lösung ist die Verwendung von:

<img srcset="https://stackoverflow.com/example.png 2x">

Es wird nicht validiert, weil die src -Attribut ist erforderlich, aber es funktioniert (außer auf jeder Version von IE, weil srcset wird nicht unterstützt).

Dies ist ein sehr alter Thread, aber ich habe ihn gefunden, als ich nach einer einfachen Lösung gesucht habe, um Retina-Bildschirmaufnahmen (hochauflösend) auf einem Display mit Standardauflösung anzuzeigen.

Es gibt also eine reine HTML-Lösung für moderne Browser:

<img srcset="https://stackoverflow.com/image.jpg 100w" sizes="50px" src="https://stackoverflow.com/questions/8397049/image.jpg"/>

Dies teilt dem Browser mit, dass das Bild doppelt so groß ist wie die beabsichtigte Anzeigegröße. Die Werte sind proportional und müssen nicht die tatsächliche Größe des Bildes widerspiegeln. Man kann auch 2w 1px verwenden, um den gleichen Effekt zu erzielen. Das src-Attribut wird nur von älteren Browsern verwendet.

Der nette Effekt davon ist, dass es auf Retina- oder Standarddisplays die gleiche Größe anzeigt und auf letzterem schrumpft.

Benutzeravatar von isherwood
Escherholz

Das ist tatsächlich möglich, und ich habe es ganz zufällig entdeckt, als ich meine erste groß angelegte Responsive-Design-Website gestaltete.

Der overflow:hidden gibt dem Wrapper trotz des schwebenden Inhalts Höhe und Breite, ohne den Clearfix-Hack zu verwenden. Anschließend können Sie Ihre Inhalte mithilfe von Rändern positionieren. Sie können das Wrapper-Div sogar zu einem Inline-Block machen.

.wrapper {
  position: relative;
  overflow: hidden;
}

.box {
  float: left; /* Note: 'float:right' would work too */
}

.box>img {
  width: 50%;
}
<div class="wrapper">
  <div class="box">
    <img src="https://via.placeholder.com/300x200" alt="">
  </div>
</div>

Benutzeravatar von Jenny Vallon
Jenny Vallon

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});

Diese Lösung verwendet js und jquery und ändert die Größe nur basierend auf den Bildeigenschaften und nicht auf dem übergeordneten Element. Es kann die Größe eines einzelnen Bildes oder einer Gruppe basierend auf Klassen- und ID-Parametern ändern.

für mehr, gehen Sie hier: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

1433770cookie-checkWie kann ich mit CSS die Größe eines Bildes auf einen Prozentsatz von sich selbst ändern?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy