• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

scale image to fit div

M

Mad Dog

Mitglied
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
 
Werbung:
Mad Dog schrieb:
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
Zum Vergrößern anklicken....

Habe mir das jetzt nicht genau durchgelesen, war aber gerade mit etwas ähnlichem beschäftigt.
Deshalb hier der Link dazu: http://jsfiddle.net/qu3ojz8b/2/

Vielleicht hilft dir das ja.
Einziges "Problem" bisher: Es darf kein white-space zwischen .overlay und .container sein.
Wer eine Lösung dafür hat, bitte her damit :)
 
Werbung:
Hallo @scbawik,

danke schon mal. Es ist aber noch nicht ganz die Lösung, die ich suche. Ein Teil hat es zumindest gelöst: das Popup ist 80% in der Breite und Höhe.
Wenn das Bild aber größer ist schaut es darüber hinaus.
Weiss darauf jemand eine Lösung mittels html/css ansonsten schaue ich mich nach einer javascript Lösung um.

Danke!
 
Mad Dog schrieb:
Hallo @scbawik,

danke schon mal. Es ist aber noch nicht ganz die Lösung, die ich suche. Ein Teil hat es zumindest gelöst: das Popup ist 80% in der Breite und Höhe.
Wenn das Bild aber größer ist schaut es darüber hinaus.
Weiss darauf jemand eine Lösung mittels html/css ansonsten schaue ich mich nach einer javascript Lösung um.

Danke!
Zum Vergrößern anklicken....

Okay stimmt, habe es nur im Safari getestet, da funktioniert es…

Update:
http://jsfiddle.net/qu3ojz8b/7/
Bringt mir zwar nichts, da ich einen zusätzlichen Container brauche, aber für dein Problem sollte es jetzt reichen?
 
Zuletzt bearbeitet:
Vielleicht so?

Code: 
<!DOCTYPE HTML>
<html>
<head>
<title>scale</title>
<meta charset="utf-8">
<style>
* {
margin:0;
padding:0;
list-style:none;
border:none;
text-decoration:none;
}

html , body {
height:100%;
}

body {
  position:fixed;
  height:100%;
  width:100%;
  background:rgba(0,0,0,.5);
}

body img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
height:80%;
margin:auto;
}

body a.prev {
position:absolute;
left:0%;
top:50%
}
body a.next {
position:absolute;
right:0%;
top:50%;
}
</style>
</head>
<body>
<img src="http://placehold.it/2560x1440" alt="" />
<a class="prev" href="#">Zurück</a>
<a class="next" href="#">Weiter</a>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Hallo Zusammen,

ich habe die letzten beiden Versionen nicht getestet, aber bei der von scbawik denk ich ist weiterhin das Problem mit dem Bild.
das <img> Tag scheint max-width und max-height nicht umzusetzen. Das hatte ich auch in verschiedenen Varianten ausprobier, aber immer ist das Bild über den Rand hinausgeschoßen...

Ich habe es daher einfach mittels JavaScript (jQuery) gelöst:

function resizeImg() {
var vWidth = Math.ceil(($(window).width())*0.8);
var vHeight = Math.ceil(($(window).height())*0.8);

var width = $('.big_image').width();
var height = $('.big_image').height();

var widthDif = width - vWidth;
var heightDif = height - vHeight;


if (heightDif > widthDif) {
// höher als breiter
$('.big_image').css('height', vHeight);
} else {
// breiter als höher
$('.big_image').css('width', vWidth);
}
}

Recht simple und hat für meine Zwecke gereicht. Was gemacht wird ist, dass die Größe des Viewports und des Bildes ermittelt wird. widthDif und heightDif ist die Differenz aus den Viewport Dimensionen und der Bild Dimensionen.
Die erste If Abfrage entscheidet (mehr oder weniger, ein Fall wird nicht behandelt), ob das Bild im quer- oder hochformat vorliegt und dementsprechend wird nur eine Dimension verändert, während sich die andere mittels der Proportionen automatisch anpasst.
Der Falls das beide Bild Dimensionen größer als der Viewport sind, wird nicht behandelt. Da müsste man das aber nur ein wenigumändern, dass zuerst die eine und dann die andere Dimension angepasst wird.

Gruß,

Mad Dog
 
Tja, CSS ist Gestaltung und JS ist Programmieren.
Übrigens, wenn du nur die Höhe angibst, ist dein Problem wohl gelöst. Was anderes macht dein JQery auch nicht.
 
Zuletzt bearbeitet:
djheke schrieb:
Tja, CSS ist Gestaltung und JS ist Programmieren.
Übrigens, wenn du nur die Höhe angibst, ist dein Problem wohl gelöst. Was anderes macht dein JQery auch nicht.
Zum Vergrößern anklicken....

Wie meinst du das mit nur die Höhe angeben?
Das Problem ist ja, dass die Bilder breiter oder höher als der viewport sein können.
 
Werbung:
Sorry hat sich erledigt.Es funktioniert nur bei horizontaler Skalierung.
Wenn es nur Bilder ohne zusätzliche Elemente sind- also vor/zurück Button u.s.w. dannn reicht das hier völlig aus.
Code: 
img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
max-height:80%;
max-width:80%;
margin:auto;
}
 
@djheke
bist du dir sicher?

top, bottom, left, right und margin sind zum mittigen zentrieren da.
Ich hatte eine ähnliche Lösung probiert, jedoch wurde das bild nicht skaliert.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben