Unbeabsichtigtes Skalieren von Artikel-Info-Bildern im responsiven Template

[klaus99]

Responsives Template:

(a) In Konfiguration / Bild-Optionen wird die Breite der Artikel-Info Bilder festgelegt (Standard 230).
Der Standard ist aber m.E. 240 px und das sollte in der Beschreibung dieses Eingabefeldes korrigiert werden.

(b) Artikel-Info Bilder mit kleinerer Breite als Standardbreite (240 px) werden alle skaliert. Das führt bei Bildern im Porträtmdus zu vielen sehr unscharfen Bildern. Siehe z.B. Testartikel4 in der Entwicklerversion (skaliert auf das 1,7fache) im Vergleich zur stabilen Version.

(c) M.E. liegt das am width:100% in der class .pd_big_image img .

(d) Ich selbst habe das Problem gelöst indem ich, wie bei den Artikel-Thumbnails, max-width und max-height fix vorgegeben habe.

(e) Im Anhang die Unterschiede zwischen stabiler und Entwicklerversion.

[Markus Rehm]

Hallo Klaus,

max-width und max-height in Verbindung mit width:100% sind keine gute Sache ... da kommt es gerne mal zu unschönen Ergebnissen bzw. zum Verzerren von Bildern.

Ändere bitte mal dein Stylesheet wie folgt ab.

ersetze das hier:

.pd_big_image img {
  margin: 0px auto;
  width:100%;
  max-width:240px;
  height:auto;
  vertical-align:bottom;
} 

mit dem:

.pd_big_image {
  position:relative;
  width:100%;
  margin: 0px 0px 0px 0px;
  border:1px solid #eee;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align:center;
  overflow:hidden;
}
.pd_big_image:before {
  content: '';
  padding-top: 100%;
  display: block;
}
.pd_big_image img {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 25%;
  max-height: 25%;
  font-size: 0;
  -webkit-transform: scale(4.0);
  -moz-transform: scale(4.0);
  -ms-transform: scale(4.0);
  -o-transform: scale(4.0);
  transform: scale(4.0);
}

Damit bekommst du immer einen quadratischen Container in welchen das Bild automatisch eingepasst wird.

Markus

[Markus]

In 11871:

fix #1644

[Torsten Riemer]

In 11872:

Revoked r11871 (fix #1644) as we use another solution

[Markus]

In 11873:

fix #1644 - new css for big_image