img Format und Erscheinungsbild 4:3 bei 50% breite, und Hover Probleme mit Hintergrund

[Andreas.]

Hallo liebe Gemeinde von Selfhtml

ich möchte immer in die gleichen Proportionen einblenden, beim drüberfahren soll das Bild grösser werden. Jetzt habe ich zwei Probleme zu denen ich keine Lösung weis.

1. Ich beschneide ja, wegen der Optik die Bilder auf 4:3, beim Hover soll das Format aber das Original sein. Beim Zoom, der funktioniert. verschiebt sich aber der Hintergrund beim Hover, der Hintergrund sollte aber starr bleiben und sich nicht bewegen!

2.Erscheinungsbild wenn ich statt der festen breite ein 50% vorschreibe, wie benenne ich dann die Höhe wenn ich einen Ausschnitt von 4:3 möchte?

ich möchte das ganze nur über CSS ändern ohne etwas in das HTMl zu schreiben, also nur über img.

img {
margin-top:7px;
width:300px!important;
height:225px!important;
display: block; 
object-fit: cover;
}

img:hover {
.im-blog hr{width:100%;
white-space: pre;
border:0;
border-top:2px solid #436a93;
margin-top:40px!important;
margin-bottom:40px!important;
clear:left;
}


.im-blog img:hover{
width:auto!important;
height:auto!important;
transition: all 0.9s ease-in-out;
transform: scale(2);
}

Andreas

[Rolf B]

Hallo Andreas,

hilft Dir aspect-ratio vielleicht weiter?

Rolf

[Andreas.]

Perfekt, danke Rolf.

img {
margin-top:7px; 
min-width:300px!important;
min-height:225px!important;
width: calc(50%);
aspect-ratio: 4/3;
display: block; 
object-fit: cover;
}

Jetzt brauche ich nur noch eine Lösung für mein Zoom Problem. Der Hintergrund, die Schriften etc. sollen starr bleiben und nur das IMG soll zoom und sich bewegen!

[Rolf B]

Hallo Andreas.,

wenn Du nur das img Element mit transform:scale vergrößerst, sollte sich nichts verschieben. Mein Spielplatz. Ich habe dem img eine background-color gegeben, weil es so viel Transparenz hat. Hoffentlich geht das in jedem Browser, wusste gar nicht, dass eine img-Hintergrundfarbe möglich ist.

Kannst Du eine Seite online stellen, die das Problem zeigt?

Oder ein Problemdemo bei codepen.io oder jsfiddle.net (oder anderen Online-Weblaboren)? Als Bild kannst Du im Zweifelsfall eins von Wikimedia Commons verwenden, oder ein Pseudobild von placeholder.com.

Rolf

[Andreas.]

Es ist total interessant, wenn man alles nochmal durch geht und neu schreibt.

https://jsfiddle.net/0wgt37er/

so kommt man manchmal dem Ziel näher. Also mein Problem, ist, das ich beim vergrößern, nicht mehr die eingezwängten Seitenverhältnisse haben will sondern das richtige RATIO.

Andreas

[Rolf B]

Hallo Andreas.,

ja ok, durch das Ändern von width und height im :hover-Fall verschiebt sich das Umfeld natürlich.

Du nagelst die Bildgröße derzeit per CSS für das img-Element fest, auf 300x225, sogar atombombensicher mit !important. Das !important hat vermutlich keinen Effekt, es wirkt lediglich anderen CSS Angaben entgegen, die anderswo stehen. Wenn es da Konflikte gibt, muss man (a) gucken, ob die "feindlichen" Regeln die richtigen Selektoren haben und sollte (b) schauen, ob man mittels Spezifität eine Lösung findet. Deswegen auch der Link auf die Specifishity, das Bild veranschaulicht das sehr schön. Weitere Infos zu Spezifität und Kaskade findest Du im Selfwiki.

Hast Du Einfluss auf das HTML? Wenn ja, könntest Du die Bilder so wie ich in ein figure-Element einrahmen (das bringt ein display:block sowie Margins und Paddings mit, dem kannst Du mit CSS entgegenwirken.

Die figure setzt Du auf display:inline-block sowie width:300px und heigth: 223px. Das Bild stellst Du da rein, mit width:100%, height:100% und object-fit:cover. Ob Du dann noch den aspect-ratio brauchst, weiß ich nicht.

In der Hover-Regel setzt Du width und height auf auto sowie transformierst. Dadurch sollte der Rest des Dokuments unverändert bleiben, weil die figure ihre Größe behält.

Wenn Du möchtest, dass die Figure sich im Zustand ohne :hover irgendwie automagisch an die Bildgröße anpasst, dann hast Du verloren, fürchte ich. Sie würde es dann auch im :hover Zustand tun. Eventuell könnte man das durch zweimaliges Einbinden des Bildes hinbekommen, einmal beschnitten, einmal skaliert und unbeschnitten mit position:absolute, um die Größe nicht zu verändern. Die Festgrößen-Lösung wäre einfacher.

Apropos Festgröße: Muss es px sein? Wenn jemand in den Browsereinstellungen die Textgröße deiner Seite skaliert, skalieren die Bilder nicht mit. Es wäre darum besser, die Bildbreite in em festzulegen (15em bis 20em sollte passen), das kannst Du nach passendem visuellen Eindruck justieren. Dann skalieren die Bilder mit dem Text.

Rolf