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