RESIZING PRODUCT IMAGE IN CONTAINER

Highlighted
Excursionist
35 1 2

Hello all I was wondering if there is a way to resize the product image so the image appears larger in the container, not to make the container itself larger but the image inside it. I have shopify booster theme my url is www.teeparts.com

0 Likes
Shopify Expert
2 0 0

I just had a look into it.

 

Can be done using css and bit of html

 

Mojito Labs

0 Likes
Shopify Partner
39 1 4

Define your container like:

.container {
   height: 200px;
   width: 200px;
   overflow: hidden;
}

The image in your container should have:

img {
   width; 100%;
   height: 100%;
   transform: scale(1.5);
}

Your image is scaled by factor 1.5 but won't widen your container.

0 Likes
Excursionist
35 1 2

im a novice in coding is it possible you could put the code togother for me and would this go into theme liquid?

0 Likes
Excursionist
35 1 2

im not too familiar with code thanks for the input though. do you have a code to do this or vcan you offer futher help ?

0 Likes
Shopify Partner
39 1 4

Your HTML would look like this ...

 

<div class="container">
   <img src="..." title="...">
</div>

... and your css should look like this ...

 

.container {
   height: 200px;
   width: 200px;
   overflow: hidden;
}

img {
   width; 100%;
   height: 100%;
   transform: scale(1.5);
}

You can add the HTML to your theme.liquid. If its only for your products page than you should add it to product.liquid

This is up to you. You will find something like timber.css or custom.css in your assets folder - this is the right spot for your 

0 Likes
Shopify Partner
39 1 4

Your HTML would look like this ...

 

<div class="container">
   <img src="..." title="...">
</div>

... and your css should look like this ...

 

.container {
   height: 200px;
   width: 200px;
   overflow: hidden;
}

img {
   width; 100%;
   height: 100%;
   transform: scale(1.5);
}

You can add the HTML to your theme.liquid. If its only for your products page than you should add it to product.liquid

This is up to you. You will find something like timber.css or custom.css in your assets folder - this is the right spot for your css classes.

0 Likes