Hallo Zusammen,
ich stehe hier vor einem Problem.
Ich habe ein Popup Fenster, welches sich öffnet, wenn auf ein Bild geklickt wird.
Dieses Fenster ist ein absolute positioniertes Div, in welchem noch ein <img> tag ist.
Mein erstes Problme war das absolute div zu zentrieren, was aber erledigt ist.
Mein Problem ist, dass ich verschiedene Bilder verschiedener Größe und Orientierung habe. Das Ziel ist es, dass das Popup Fenster eine maximale Breite als auch Höhe von 80% des Viewportes haben. Wenn ich jedoch das Höhe des absoluten divs mittels max-height: 80%; angebe zerschiesst es die Zentrierung. Mit max-width: 80%; funktioniert es. Jedoch wenn ich ein breites Bild habe, ist diesem die maximale Breite scheinbar egal und es geht über den "Rand" hinaus.
Sehr wichtig: Die Proportionen des Bilder sollen beibehalten werden!
Code
.white-popup {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
max-width: 80%;
}
Dieser Teil zentriert das absolute div.
<div id="popup-general" class="white-popup mfp-hide">
<img src="<?php echo $root; ?>images/<?php echo utf8_encode($img->name); ?>" width="" alt="" height="" class="big_image"/>
</div>
Dies ist das Popup.
Reine CSS Lösungen sind bevorzugt, jedoch befürchte ich, dass ich für die Anpassung des Bildes JavaScript benötige.
Danke und Grüße,
Mad Dog
ich stehe hier vor einem Problem.
Ich habe ein Popup Fenster, welches sich öffnet, wenn auf ein Bild geklickt wird.
Dieses Fenster ist ein absolute positioniertes Div, in welchem noch ein <img> tag ist.
Mein erstes Problme war das absolute div zu zentrieren, was aber erledigt ist.
Mein Problem ist, dass ich verschiedene Bilder verschiedener Größe und Orientierung habe. Das Ziel ist es, dass das Popup Fenster eine maximale Breite als auch Höhe von 80% des Viewportes haben. Wenn ich jedoch das Höhe des absoluten divs mittels max-height: 80%; angebe zerschiesst es die Zentrierung. Mit max-width: 80%; funktioniert es. Jedoch wenn ich ein breites Bild habe, ist diesem die maximale Breite scheinbar egal und es geht über den "Rand" hinaus.
Sehr wichtig: Die Proportionen des Bilder sollen beibehalten werden!
Code
.white-popup {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
max-width: 80%;
}
Dieser Teil zentriert das absolute div.
<div id="popup-general" class="white-popup mfp-hide">
<img src="<?php echo $root; ?>images/<?php echo utf8_encode($img->name); ?>" width="" alt="" height="" class="big_image"/>
</div>
Dies ist das Popup.
Reine CSS Lösungen sind bevorzugt, jedoch befürchte ich, dass ich für die Anpassung des Bildes JavaScript benötige.
Danke und Grüße,
Mad Dog