Link auf ein Bild bzw. auf ein gesamtes div setzen
 

Hallo,

seit ein paar Wochen taste ich mich nun immer weiter an HTML und CSS heran und bin dadurch auf dieses Forum gestoßen.
Auf meiner Website Die besten Trinkspiele findest du bei uns - mehr-trinken.org (es geht um Trinkspiele, wobei der Content ja erstmal nebensächlich ist :D) probiere ich daher in der Wordpress Umgebung Custom CSS und HTML aus.

Nun zu meinem Problem:
Für die verschiedenen Spiele möchte ich Kurzbeschreibungen, welche eingerahmt sind. Diese kann man weiter unten auf der Website bereits finden. Das Problem ist dabei jedoch im Moment, dass wenn ich einen Link auf das Bild setzte, es seine Größe stark verändert. Dieses Phänomen kann man unter "Kategorien - Film Trinkspiele" finden.
Warum ändert das Bild dort seine Größe?

Auch habe ich in diesem Forum von der Möglichkeit gelesen ein gesamtes div zu linken. Gibt es eine Möglichkeit dies ohne Javascript zu erreichen?

Vielen Dank im Vorraus

Lukas

du hast mittels ".kat-site-container img" dem Bild eine Breite von 40% gegeben.

Was meinst du mit "gesamtes div linken"? Einen link auf einen Bereich?

Dem a-tag ist es egal was drinnen ist, du kannst jeden Inhalt hineingeben den du magst.

Das hatte ich völlig vergessen, danke. Der CSS Editor in Wordpress ist eben doch sehr unübersichtlich.

Beide Lösungen funktionieren natürlich, besten Dank für die Antwort :)

Edit: Doch nicht. Nach dem Herausnehmen der "Width: 40%" wurden die Bilder stark nach rechts verzerrt. Dafür hatte ich wohl die Größe festgesetzt.
Die Bilder werden außerdem nur kleiner, wenn ich den Link setze.
Könnte das an einem vordefinierten CSS Style aus meinem WP Theme liegen?

Ein weiteres Problem liegt darin, das ich gerne alle Bilder untereinander (wie auf der Startseite zu sehen) in der gleichen Breite und Höhe hätte.
Bisher habe ich noch keinen anderen Weg gefunden als diesen hier:

#img2 {
background-image: url('http://mehr-trinken.org/wp-content/uploads/2017/10/not-ludo-1745964_1920-300x168.jpg');
height: 80%;
width: 100%;
background-size: cover;
background-position: bottom center;
}

Wobei mir auch dieser Weg von einem Klassenkameraden auf die schnelle gezeigt wurde.

Erstens: Freunde dich mit den Developer-Tools der Browser an (rechtsklick -> Element untersuchen) Dann siehst du alle Regeln, die auf ein Element wirken und kannst auch sofort änderungen machen. Damit kannst du dich selber an eine Lösung heranarbeiten.

Zu deinem CSS und den verzerrten Bildern:
Bilder werden standardmäßig niemals verzerrt angezeigt, außer der Ersteller der Website wünscht das. Das wünscht er, indem er zB Höhe UND Breite angibt. Es reicht, nur einen Wert anzugeben, der andere Wert wird dann dementsprechend angepasst.

Das ist auch bei deinem CSS zu sehen: height: 80%, width: 100%, wie soll das "korrekt" sein?
Auch wird dein img1, img2, etc. nur im CSS verwendet, auf der Seite kommt dies nie vor.

Beschäftige dich lieber mit den Grundlagen von CSS, hier verwendest du unnötige ID-Attributselektoren, woebi du dich hier oft wiederholst im CSS. Auch solltest du besser eine CSS Datei verwenden anstatt das CSS in den Wordpress-Editor zu schreiben, das wird dann nämlich auf jeder Seite ausgespielt und nicht gecached.

Zusammengefasst: Grundlagen von CSS (+HTML) lernen und verstehen, bzw. wenn das nicht gewünscht ist und wirklich nur mit Wordpress gearbeitet werden soll, dann suche dir ein Theme welches deine Anforderungen an ein Layout unterstützt und verzichte auf eigenes CSS. Dafür ist Wordpress ja auch da :)

Wenn du noch immer die Links auf deinem Bild haben möchtest, versuche doch das hier https://jsfiddle.net/cfLtnr02/2/
BenjeminStar ;)

Bessere Lösung wäre, wie schon von mir weiter oben angesprochen, die Links um den gesamten Content zu legen:

Nochmals danke für eure Antworten.

CSS (und HTML) lernen ist definitv erwünscht. Ich mache schließlich seit 4 Monaten eine Ausbildung zum Fachinformatiker Anwendungsentwicklung :D

Werde mich dann mal ransetzen :)

Und wie schauen die Fortschritte mittlerweile aus?