Onderwerp: Verkleinde afbeelding blijft (te) klein bij produktweergave

Dag allemaal,

Ik heb de volgende uitdaging.
Onder item "Configuratie" - tabblad "Template" vind je links onderaan Instelling mediabestand
Daar vul ik bij "Dynamisch wijzigen formaat miniatuurafbeelding inschakelen"een vinkje in en bij breedte: 210 en bij hoogte 140 (dus een liggende afbeelding)

Ik maak van mijn product een afbeelding van bv 640x480 pixel in een .png - bestand.
Tijdens upload bij tabblad "artikel afbeelding" wordt een resize (verkleining) gemaakt van 210x140 px
Bij de presentatie van m'n product idd een mooi klein liggende plaatje.

Ga ik nu breedte en hoogte in configuratie menu omwisselen in lengte 140 en hoogte 210 en ik ga een product afbeelding uploaden die 480x640 (rechtopstaand formaat)

Als ik deze 2 artikelen naast elkaar toon, zijn ze beide even hoog ipv 1 st 210x140 en 1x 140x210
dus 2 artikelen naast elkaar en de hoogte wordt dan de kleinste dus de 140 px.

Met behulp van fire-bug zie ik de css instructie ( bestand vm-ltr-site regel 168)  "widht: auto
en het vakje waar de afbeelding is staat: op regel 148:
vm-product-media-container {
    margin-bottom: 15px;
    max-width: 100%;
    text-align: center;

Wie heeft er een oplossing / idee ??

Hallo Gerrit,
Weet je zeker dat je goed gekeken heb
Wat staat er in vm-ltr-site regel 157
zo groot zou je plaatje eigenlijk moeten kunnen zijn

maar  ik ga er van uit dat je dus in vm3 bij Configuratie tabblad  template ook de gebruik standaard template van joomla instelling heb gekozen en dan is de vraag welke template je dus standaard gebruikt.
mijn plaatje is dus  zo als deze

Leen,

Dank voor je reactie.
Bovenstaand staat bij mij ook zo.
En bij configuratie de standaard joomla template.
Ik gebruik nu de bij joomla geinstalleerde Beez3.
Verder J3.4.1 en VM 3.0.6.2.

Probeer als je wil met 2 artikelen naast elkaar.
1e artikel "liggend" b.v. resize 210 breed en 140 hoog
2e artikel "staand" b.v. resize140 breed en 210 hoog

Als ik dan de artikelpagina bekijk is plaatje van 1e artikel even hoog als 2e artikel.
Ben al wat aan het spelen geweest met diverse css, maar nog niet gewenste resultaat.
Zal proberen er even een plaatje van te maken voor je.

Gerrit

ps: main-image gebruik je als je een artikel hebt aangeklikt om verder te bekijken bij dat artikel. Dat is de hoogte bv 260px
Maar ik bedoel de 1e presentatie onder een categorie.
Als je op het bovenste deel bij het plaatje kijkt is dat "vm-product-media-container"
Als je het plaatje alleen bekijkt is dat "browseProductImage"

Hallo Gerrit,
Hi lastig maar heb je al eens geprobeerd wat er gebeurd als je
regel 159  max-height en max-width op 100 % zet.
en Regel 165 ipv auto op 100 % zowel widht en height
denk dat je het daar een beetje kan zoeken
heb even bij mijn test laten staan wat er dan gebeurt
http://leenvandenadel.nl/tesjoomla3/petjes
http://leenvandenadel.nl/tesjoomla3/hoeden

Leen,

Ik heb het lek boven 

In "components\com_virtuemart\assets\css" in bestand "vm-ltr-site"

Ik heb een liggende afbeelding 210x140 px en een staande afbeelding 140x210 px
Je heb in een artikel 2 kaders zeg maar die je in kunt stellen.

Het eerste kader, zeg maar tussen boven rand en tekst onder de afbeelding is "vm-product-media-container"
daar heb ik van gemaakt: .vm-product-media-container {text-align:center;max-width: 100%;height:210px;margin-bottom:15px;}
Dus breedte=width 100% = gelijk verdelen bij aantal produkten per regel
Height: 210 px maakt m'n kader 210 px hoog ongeacht de afbeelding.
margin-bottom:15px is de positie van de tekst onder de afbeelding.

Dan het tweede kader, zeg maar de afbeelding is "browseProductImage"
daar heb ik van gemaakt: .browseProductImage {max-width:100%;max-height:100%;}
Dus max. width en height 100%.

Dan krijg je beide afbeeldingen er goed op en op 210x140 en op 140x210 mooi uitgelijnd.
Het enige dat ik nog zoek om de afbeelding vertikale te centreren  :-[

Wordt vervolgt.
Gerrit