designkontrolle.de | Bilder Crop per CSS
5
post-template-default,single,single-post,postid-5,single-format-standard,ajax_fade,page_not_loaded,,select-child-theme-ver-1.0.0,vertical_menu_enabled, vertical_menu_transparency vertical_menu_transparency_on,wpb-js-composer js-comp-ver-5.4.1,vc_responsive

Bilder Crop per CSS

Bilder mit unterschiedlichen Proportionen per CSS3 in Reih und Glied bringen.

In meinem Beispiel nutze ich ein kostenloses Newsmodul für Joomla (DisplayNews http://joomla.rjews.net/downloads/category/14-display-news-for-joomla-16) um Artikel einer bestimmten Kategorie aufzulisten.

Leider werden die Artikelbilder nicht so angepasst, dass alle die gleichen Proportionen haben.
Alternativ könnte man jetzt die Bilder mit einem Grafikprogramm so anpassen, dass die Proportionen immer die Gleichen sind.

Wem das auf Dauer zu nervig ist, der kann versuchen, folgenden CSS Code  zu nutzen:

.my_container img {
max-height: 400px;
overflow: hidden;
display: block;
max-width: 100%;
height: 400px;
width: 100%;
object-fit: cover;
}
@media only screen and (max-width: 1200px) {
.my_container img {
max-height: 250px;
height: 250px;
}
}
@media only screen and (max-width: 990px) {
.my_container img {
max-height: 200px;
height: 200px;
}
}
@media only screen and (max-width: 768px) {
.my_container img {
max-height: 150px;
height: 150px;
}
}

 

Der Code muss nicht zwangsweise auf das img angewendet werden. Es reicht auch der my_container, in dem das img liegt.

Mit ‚@media only screen and…‘ kannst du die Proportion entsprechend verkleinern, um es für Responsive anzupassen.

 

Sollte

Stephan Edelberg

Als Fachmann für Joomla, Wordpress und Contao bin ich Ihr perfekter Partner für die Erstellung Ihrer individuellen Internetseiten. Planung, Programmierung, Gestaltung des Designs, zusätzliche Funktionen sowie Sichtbarkeit in Suchmaschinen werden dabei genauso berücksichtigt wie Nutzerfreundlichkeit, ein modernes Design und die Anpassung an Tablet & Smartphone.

Keine Kommentare

Schreibe einen Kommentar

*