Get image to scale within element

Responsive
1

Hi guys,

I produced the following webpage
http://www.toolfolks.com/hype/Drills&Batteries.html

Each ‘advert’ element is a symbol I created.
The idea is I can quickly produce a web page with 1 or many ‘adverts’ on the page.
I created it using the images in the bottom 2 that were square images.

Once I place a non square image it distorts.

I have tried all the settings in the flexible layout to get it to work.

All the images have a white background and I need the image to scale centrally within the element (ie white space around the image).

Do I have to do some CSS & if so can this be saved within the symbol ?

Cheers

Steve Warby.

2

Hi Steve,

This should be simple to sort but would be easier to see the project.
Can you post your test project so we can clearly see what you are doing… i.e placing new images.

1 Like
3

I have produced a scaled image for the first ad ( but this is additional work)

The second add have the image I cannot proportionally scale.

Cheers

Steve Warby

Drills&Batteries.zip (1001.3 KB)

4

@classic12 ( updated below )

if you give the images a class name of ‘ad1’

Then place this in the styles in the head

.ad1{
 
 background-size: contain !important;
  background-position: 50% 50% !important;


}

When you duplicate the symbol, place it in the scene and choose a new image… it should scale.

dupeSymbolImageScale.hype.zip (543.1 KB)

1 Like
5

Thanks. That did the trick.

Cheers

Steve Warby

1 Like
6

On the same theme (So I’ll keep in the same thread).

In the attached app I’m trying to ensure that ‘logos’ scale and remain in place on the tshirts.

I tried loads of different methods and this is the closest I have got.

The left t-shirt scales and the logos move correctly (but the logos scale to big)

The right jacket scales okay and the logos scale okay (but the logos move incorrectly).

Cheers

Steve Warby

tshirtLogo.zip (1.1 MB)