Wie verdopple ich eine Bildgröße in HTML mit nur CSS?

Question

I In HTML verwenden, haben versucht:

<img src="../Resources/title.png" /> 

In CSS:

img { 
    width: 200%; 
    height: 200%; 
} 

Aber diese skaliert die Bilder basierend auf dem Tag Elternteil das Bild ist, wenn ein Bild 150px von 150px I ist. möchte es auf 300px um 300px skalieren. Ich möchte, dass dies für alle Bilder funktioniert, unabhängig von ihrer Größe oder ihrem übergeordneten Tag. Und ich möchte nur CSS verwenden. Ideen?

Answer 1

Sie können nur CSS < Version 3 verwenden.

Wenn Sie die Breite/Höhe eines Elements festlegen, ist es relativ zum Container.

---

aktualisieren, wie es da diese Antwort ganz einige Zeit gewesen gebucht wurde.

Wie ein Kommentator hervorhebt, kann dies erreicht werden, indem einfach die CSS-Eigenschaft zoom verwendet wird. Jedoch, it's not recommended, wie es zuerst ausschließlich von IE implementiert wurde, in den IE6/7 Tagen und never formalized into the W3C standard. Stattdessen wird heutzutage eine CSS-Transformation verwendet, die die scale-Funktion verwendet.

Mehr über die scale() CSS-Funktion: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

Beispiel: https://jsfiddle.net/2n5zLhz3/

Answer 2

Sie können dies mit dem scale() 2D-Transformation, aber eine der auffälligen neuen CSS3-Funktionen sind support is incomplete at this time and you need vendor prefixes:

img { 
    -moz-transform: scale(2); 
    -ms-transform: scale(2); 
    -o-transform: scale(2); 
    -webkit-transform: scale(2); 
    transform: scale(2); 
} 

Allerdings glaube ich nicht, dass dies den Fluss des Inhalts berücksichtigt, wie Transformationen tun ne auf einzelne Elemente und als solche das Layout nicht beeinflussen. Siehe auch die transform-origin property.

Wenn Sie eine gute Browserunterstützung benötigen oder den Reflow des Inhalts benötigen, müssen Sie sich mit einer Alternative wie JavaScript oder Neustrukturierung Ihres HTML-Codes begnügen, sodass die Eigenschaften width und height korrekt skaliert werden und beeinflussen den Elementfluss auf natürliche Weise.

Answer 3

Sie können das Bild in einem div einschließen und dann seine Größe relativ zu dem übergeordneten festlegen.

<style type="text/css"> 
.double{ 
    display: inline-block; 
} 

.double img{ 
    width: 200%; 
} 
</style> 
<div class="double"><img src="../Resources/title.png"></div> 

Answer 4

Sie können das Bild verdoppeln, indem die prozentuale nehmen Sie von Fenstergröße benötigen.

p > img { 
    width:100%; 
    height:60vh; 
} 

"höhe: 100vh;" bedeutet 100% von Ihrem Browser-Fenster. Sie müssen nur die Mathematik zu tun.