CSS-Bildgröße Prozentsatz von sich selbst ändern?

108

Ich versuche, die Größe eines Bilds mit einem Prozentsatz von sich selbst zu ändern. Zum Beispiel möchte ich das Bild nur um die Hälfte verkleinern, indem ich es auf 50% verkleinere. Beim Anwenden width: 50%;wird jedoch die Größe des Bilds auf 50% des Containerelements geändert (das übergeordnete Element, das <body>beispielsweise das ist).

Die Frage ist, kann ich die Größe des Bildes mit einem Prozentsatz von sich selbst ändern, ohne Javascript oder Server-Seite zu verwenden? (Ich habe keine direkten Informationen über die 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!

html css image

— Min Ming Lo
quelle

Es nimmt den Prozentsatz des enthaltenen Elements ein, wenn Sie verwenden würden width: <number>%. Ich glaube nicht, dass es einen Weg gibt, das zu tun!

— Aniket

110

Ich habe 2 Methoden für dich.

Methode 1. Demo auf jsFiddle

Bei dieser Methode wird die Bildgröße nur visuell geändert, nicht die tatsächlichen Abmessungen im DOM. Der visuelle Status nach der Größenänderung wird in der Mitte der Originalgröße zentriert.

html:

<img class="fake" src="example.png" />

CSS:

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

Hinweis zur Browserunterstützung : Die Browser-Statistiken wurden inline angezeigtcss.

Methode 2. Demo auf jsFiddle

html:

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>

CSS:

#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%;
}

Hinweis: img.normal undimg.fakeist das gleiche Bild.
Hinweis zur Browserunterstützung: Diese Methode funktioniert in allen Browsern, da alle Browsercssdie in der Methode verwendeten Eigenschaftenunterstützen.

Die Methode funktioniert folgendermaßen:

#wrapund #wrap img.fakefließen haben
#wraphat overflow: hiddenso, dass seine Dimensionen mit dem inneren Bild identisch sind ( img.fake)
img.fakeist das einzige Element im Inneren #wrapohne absolutePositionierung, damit der zweite Schritt nicht unterbrochen wird
#img_wraphat eine absolutePositionierung im Inneren #wrapund erstreckt sich in der Größe auf das gesamte Element ( #wrap)
Das Ergebnis des vierten Schritts ist, dass #img_wrapes die gleichen Abmessungen wie das Bild hat.
Durch die Einstellung width: 50%auf img.normal, ist seine Größe 50%von #img_wrap, und damit 50%von der ursprünglichen Bildgröße.

— Vladimir Starkov
quelle

Dies ändert die Größe des Bildes nicht auf 50% seiner ursprünglichen Größe, sondern auf 50% des übergeordneten Elements von img_wrap.

— Wesley

In meiner aktualisierten Antwort finden Sie einen Versuch, das Problem zu lösen. Was denken Sie?

— Wesley

Ich denke, es sollte möglich sein, display zu verwenden: keine anstelle der Sichtbarkeit, wie in meinem Code. In Ihrem Beispiel ist der Platz für das gefälschte versteckte Bild immer noch "reserviert", was den Fluss

— Wesley

Dies ist unmöglich, da der Haupttrick in zwei verschachtelten und schwebenden Tags besteht.

— Vladimir Starkov

1

Die transform:scale()Lösung hat jedoch ein großes Problem. Es interagiert nicht gut mit dem CSS-Box-Modell. Damit meine ich , dass es nicht mit ihm interact tut überhaupt , so dass Sie das Layout bekommen , die alles falsch aussieht. Siehe: jsfiddle.net/kahen/sGEkt/8

— kahen

46

HTML:

<span>
    <img src="example.png"/>
</span>

CSS:

span {
    display: inline-block;
}
img {
    width: 50%;
}

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

Bei Verwendung des Containerelementansatzes 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 skalierten Bildes entspricht. Wenn Sie also die widthEigenschaft des Bildes als Prozentwert festlegen, wird das Bild relativ zu seiner ursprünglichen Skalierung skaliert.

Einige der anderen Schrumpffolien-Enabling Eigenschaften und Eigenschaftswerte sind: float: left/right, position: fixedund min/max-width, wie in der verknüpften Frage erwähnt. Jeder hat seine eigenen Nebenwirkungen, display: inline-blockwäre aber eine sicherere Wahl. Matt hat float: left/rightin seiner Antwort erwähnt, aber er hat es fälschlicherweise zugeschrieben overflow: hidden.

Demo auf jsfiddle

Bearbeiten: Wie von Trojanern erwähnt , können Sie auch das neu eingeführte intrinsische und extrinsische CSS3-Größenmodul nutzen :

HTML:

<figure>
    <img src="example.png"/>
</figure>

CSS:

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

Zum Zeitpunkt des Schreibens unterstützen dies jedoch nicht alle gängigen Browserversionen .

— Gemeinschaft
quelle

@Jemand, wie man nicht kollabierende Spannenränder repariert? Geige

— AdR

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

— Chnikki

Für zukünftige Leser: Der richtige Wert figureist width: fit-content;ab sofort. Die Browserunterstützung ist heute auch viel besser.

— Dániel Kis-Nagy

12

Versuchen Sie zoomEigenschaft

<img src="..." style="zoom: 0.5" />

Bearbeiten: Anscheinend unterstützt FireFox keine zoomEigenschaft. Du solltest benutzen;

-moz-transform: scale(0.5);

für FireFox.

— Emir Akaydın
quelle

4

Es gibt keine CSS-Eigenschaft wie "Zoom" und sie wird nur von IE unterstützt. Es ist eine Microsoft-eigene Sache und nicht Standard.

— Rob

9

Leider sind diese Informationen veraltet. Zoom wird derzeit von den Browsern Internet Explorer, Chrome und Safari unterstützt. FireFox und Opera unterstützen dies noch nicht. Deshalb habe ich den Bearbeitungsteil hinzugefügt. IE ist der erste, der es unterstützt, aber nicht der einzige.

— Emir Akaydın

Laut diesem Link scheint Opera auch das Zoomen zu unterstützen. FireFox ist das einzige, das nicht unterstützt wird. fix-css.com/2011/05/css-zoom

— Emir Akaydın

2

Deshalb hat IE in den letzten 8 Jahren die Hälfte seines Marktanteils verloren. Wenn Sie sich nicht zuverlässig darauf verlassen können, dass Browser etwas unterstützen, haben Sie keine Gemeinsamkeiten. Die Spezifikation wird von den Browser-Anbietern selbst geschrieben. Wenn sie es dort nicht einfügen, verlassen Sie sich nicht darauf, oder Sie schreiben mehrere Markup-Zeilen, wie Sie es getan haben. Dies ist nicht wieder 1998.

— Rob

1

Ich weiß nicht, ob Sie es bemerkt haben, aber "Zoom" wird von Internet Explorer, Chrome, Safari und Opera unterstützt. Dies ist der Beweis dafür, dass "Zoom" nicht herstellerspezifisch ist. Nur FireFox unterscheidet sich. Also wiederhole ich meine Frage. Was ist die saubere Lösung mit kompatibler CSS-Eigenschaft? Meine Antwort ist die beste Antwort, bis jemand eine richtige Standardlösung findet.

— Emir Akaydın

5

Eine andere Lösung ist zu verwenden:

<img srcset="example.png 2x">

Es wird nicht überprüft, da das srcAttribut erforderlich ist, aber es funktioniert (außer bei jeder Version von IE, da srcsetes nicht unterstützt wird).

— benface
quelle

2

Dies ist tatsächlich möglich, und ich habe zufällig festgestellt, wie zufällig ich meine erste groß angelegte Responsive Design-Site entworfen habe.

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

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

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

.box > img { width:50%; }

Der Überlauf: versteckt gibt dem Wrapper trotz des schwebenden Inhalts Höhe und Breite, ohne den Clearfix-Hack zu verwenden. Sie können Ihren Inhalt dann mithilfe von Rändern positionieren. Sie können den Wrapper div sogar zu einem Inline-Block machen.

— Matt
quelle

2

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

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

<img srcset="image.jpg 100w" sizes="50px" src="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 schöne Effekt davon ist, dass es auf der Netzhaut oder dem Standarddisplay dieselbe Größe anzeigt und auf letzterem schrumpft.

— Max_B
quelle

0

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 der Grundlage des übergeordneten Elements. Die Größe eines einzelnen Bilds oder einer Gruppe kann mithilfe von Klassen- und ID-Parametern geändert werden.

Weitere Informationen finden Sie hier: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

— Jenny Vallon
quelle

0

Dies ist ein nicht schwerer Ansatz:

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}

— nickthehero
quelle

0

Tatsächlich skalieren die meisten Antworten hier das Bild nicht wirklich auf die Breite von sich selbst .

Wir müssen eine Breite und Höhe von auto für das imgElement selbst haben, damit wir mit seiner Originalgröße beginnen können.

Danach kann ein Containerelement das Bild für uns skalieren.

Einfaches HTML-Beispiel:

<figure>
    <img src="your-image@2x.png" />
</figure>

Und hier sind die CSS-Regeln. In diesem Fall verwende ich einen absoluten Container:

figure {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5); 
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5);
    transform: scale(0.5);
    transform-origin: left;
} 

figure img {
    width: auto;
    height: auto;
}

Sie können die Bildpositionierung mit Regeln wie anpassen transform: translate(0%, -50%);.

— Floris
quelle

-1

Ich denke, Sie haben Recht, soweit ich weiß, ist dies mit reinem CSS einfach nicht möglich (ich meine nicht Cross-Browser).

Bearbeiten:

Ok, meine Antwort hat mir nicht sehr gut gefallen, also habe ich ein wenig gerätselt. Ich hätte vielleicht eine interessante Idee gefunden, die helfen könnte. Vielleicht ist es doch möglich (obwohl nicht die schönste Sache überhaupt):

Bearbeiten: Getestet und funktioniert in Chrome, FF und IE 8 & 9. . In IE7 funktioniert es nicht.

jsFiddle Beispiel hier

html:

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

CSS:

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}

— Wesley
quelle

Ihr Beispiel Größe Bild nicht proportional ändern

— Vladimir Starkov

Ihre Methode macht es möglich, Bild durch Fenstergröße zu verkleinern

— Vladimir Starkov

Aus diesem Grund hängt inline-blockdie Breite #img_wrapnicht nur von der inneren HTML-Breite ab, sondern auch von der Breite des Kontextcontainers.

— Vladimir Starkov

Soweit ich das beurteilen kann, macht diese Anzeige: Kein Bild macht nichts und kann entfernt werden. Oder fehlt mir etwas?

— Tremby