Main Product Image resize VirtueMart 3.2.4

[alquemius]

Hi guys I am absolutely new to Virtuemart, a complete virgin, so please bare with me....


VirtueMart 3.2.4
Joomla 3.8.1
PHP 7
You may see the a test tab at this page:
http://www.filakitaki.com/index.php/en/test


I am trying to set up un test product to learn a bit about virtuemart and to have a base to go from with the following products; yet its a bit of a mess to change the image size no matter what I do it stays small.  I ve seen some tutorial but they are V1 and V2 tutorials with coding and I guess I am not doing something right or maybe its a version thing.

on the other hand.... I just dont get why virtuemart being such a cool and potent storefront can't make it easier to handle image sizing without having to go on coding like getting a super cool car but hey! Guess what? You got to make your own steering wheel LOL!



Any guidance on how to deal with images would be super appreciated!  Have a good day/evening!!

[Studio 42]

You have a css in Virtuemart.

Code Select Expand

.browseProductImage {
    max-height: 90px;
    width: auto;
    max-width: 100%;
}
max-height: 90px; is why it not resize correctly.
Try to add in your template css

Code Select Expand

img.browseProductImage {max-height: 300px;}
for eg. or

Code Select Expand

img.browseProductImage {max-height: 100%;}

[alquemius]

Thank you Studio42!

Are you talking about virtuemart.css ? Where may I find that file ?

[Studio 42]

You can simply add the rule in your template.
Directly in any CSS file of your template or if you can add custom CSS rules in the template style.

[alquemius]

Alright, will give it a go.

Thank you Studio 42!

[marvays]

Hi. I have question. How I can make css for centered image, with overflow.
The input images are different in size and different aspect ratios. I need a product image to display 250px x 250px. min-height and min-width is 250px. Align to center. I've been trying it for an hour and I can not.

[Studio 42]

Have you try this https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Or https://www.anthony-brard.com/centrer-une-image-horizontalement-et-verticalement-dans-un-bloc

[GJC Web Design]

surely better to make them the same size .. pad out with whitespace etc

nothing looks worse than varying sizes and shapes of images.. bah

[Milbo]

There is also an automatic resize of the main image. Modern templates may omit the css width, heigth stuff and just use the vm resize feature. It depends on your template. Do you use the vmbeez?

Another idea is to override the css with an extra css style added to the header. but templaters may hate that also. Not simple to find a nice solution which fits to anyone.