Größe eines Bildes zu einem Prozentsatz von html-Fenster

Ist es möglich zu definieren, ein Bild von einem Prozentsatz der Dokument-Fenster? Es verschachtelt in mehrere div-tags, so wäre es irgendwie zu definieren, seine Höhe% in der Referenz auf das Fenster, anstatt der übergeordneten Tags. Im Effekt, so etwas wie dieses...

<img src="image.jpg"  height="50% of window"/>

Prozentangaben sind immer relativ zum übergeordneten element, könnte dies mit JavaScript gemacht werden
Siehe meine Antwort bitte.

InformationsquelleAutor user962642 | 2013-09-14

15

Können Sie die viewport-Höhe und Breite.

Z. B. die folgende Klasse wird dem element die Hälfte der Größe des Viewports.
```
.size {
    width: 50vw;
    height: 50vh;
}
```
jsFiddle Demo

Dies ist ein Reine CSS3 Lösung, aber es hat einige browser-Unterstützung Probleme.

InformationsquelleAutor Itay
6

Nicht mit CSS, sondern mit JavaScript:
```
yourImage.height = Math.floor(window.innerHeight / 2)
```
ok Super!!! Ich bin ein wenig langsam mit JavaScript. Muss ich eine variable deklarieren? dh diese ist was ich geschrieben habe am Anfang meiner javascript-Seite, die Lasten mit der Datei (mit dem Namen white.jpg) weiß.Höhe = Math.Stock ("Fenster".innerHeight / 2);
Sie können hinzufügen, ein id auf Ihr Bild, und sagen document.getElementById('yourImagesId').height = ...

InformationsquelleAutor Doorknob
0

Oder mit jQuery:

$("#yourimageselector").Höhe($(window).height());

Oder für 50%...unterteilen, die Fenster Höhe durch 2.
Wie kann ich die Kluft, die Fenster der Höhe von 2?
$("#yourimageselector").Höhe($(window).height() / 2);

InformationsquelleAutor Daniel Schwarz

Fand ich die beste Lösung für dieses hier. Das Beispiel in diesem Artikel nicht für mich arbeiten, wenn ich fügte hinzu, ein Bild in den mix. Jedoch, ich verbesserte es die Erstellung einer "Karte" layout, das funktioniert mit einem Bild und text.

.course-card-wrapper {
    display: inline-block;
    position: relative;
    width: 50%;
    background-color:silver;
}
.course-card-aspect-ratio {
    padding-top: 150%;
}
.course-card-image {
  width: 100%;
  height:auto;
}
.course-card {
  position:absolute;
  left:10px;
  top:10px;  
  bottom:10px;
  right:10px;
  background-color:white;
  overflow:hidden;
  text-align:center;
  box-shadow: 0 0 10px rgba(0,0,0, 0.2);
}