How do i resize an image to fit the screen width?

[Mike4997955]

I need the image at the top of my screen re-size depending on the screen size or orientation.

I can't seem to get it to work. I used the following JavaScript on page load and on resize:

$('img[dsid="CrystalImage"]')
.css('width', '100%')
.css('height', 'auto')
;

I also tried adding the CSS properties to image in Tiggzi using "more properties", but that didn't work either. What do you suggest?

Thanks.

[maxkatz]

Check with Firebug or Chrome Dev. Tools, it's possible some other CSS is overwriting your changes. It's also possible a parent container doesn't let the image to be resized.

[Mike4997955]

The properties i need to work are these:

$('img[dsid="CrystalImage"]')
.css('width', '100%')
.css('height', 'auto')
.css('display', 'block')
;

So that an image will adjust to the screen width of a mobile device.

I used chrome development tools and found:
The img width in the class created by TIggzi overrides the changes i made to the image element. In chrome, if i manually change the property of "width" to 100%, it works beautifully. Do you have some ideas how i can do this in Tiggzi, without having to compile the script manually.

Iv'e added this CSS in TIggzi, but the original width is still overridden by the browser:

.mobileimage2_div {
width: 100%; height: auto;
}
.mobileimage2 {
width: 100%;
height: auto;
}

[maxkatz]

How did you apply the custom CSS that you created?

[Mike4997955]

I've tried using this on page load:
$('img[dsid="CrystalImage"]')
.css('width', '100%')
.css('height', 'auto')
.css('display', 'block')
;

I've added this to the CSS in the project panel:
.mobileimage2_div {
width: 100%; height: auto;
}
.mobileimage2 {
width: 100%;
height: auto;
}

What do you think?

[maxkatz]

Put your CSS in a separate CSS file (Create New CSS). Then add your class to the Image component in its Class property (in Properties). This way this class will be set before all other classes.

[Mike4997955]

It didn't work. I checked, and my CSS was first on the page's HTML, but it still deferred to page css.

I added the info from chrome.

What do you think is going on with this?

[Mike4997955]

You can see that the browser is choosing a width of 300px, but it also looks like that it discarded the ones i didn't want.

[Maryna Brodina]

Hello! Please try to add "!important" to CSS

[Mike4997955]

That fixed it. Thank you!