CODEWITHSUNDEEP
javascripthtmlcss
Tom
Tom

Reputation: 55

HTML CSS JS onload change image size bad scale

I need scale image smooth, variable is image height, width is auto scaling by height size with css width: auto

css and HTML:

footer {
  position: fixed;
  bottom: 0;
  height: 100%; /* if i change size here example: 300px get good scale */
  margin-top: 15px;
}

footer img[usemap] {
  border: none;
  width: auto;
  max-height: 100%;
  height: 100%;
}
<footer>
  <img src='https://burritojustice.files.wordpress.com/2011/02/img_3769.jpg' usemap="#Map" name="#Map" id="map">
</footer>

javascript:

$('footer').css('height', '300px'); //if i change size here get bad scale
/* at the result i need write with javascript how much height it's my image and get nice scale */

If i change css line: height: 100% to height: 300px it's works good width change together height by scale, but if i try to change value with javascript like this: $('footer').css('height', '300px'); it's works bad, also get 300px height but width remains the same not scaling.

https://jsfiddle.net/bddgo26o/1/

Upvotes: 1

Views: 715

Answers (2)

Alejandro Teixeira Mu&#241;oz
Alejandro Teixeira Mu&#241;oz

Reputation: 2768

Check the v3 of the fiddle:

https://jsfiddle.net/bddgo26o/3/

Is that what you need? 

footer {
    position: fixed;
    bottom: 0;
    height: 20%; /* if i change size here example: 300px get good scale */
    width:100%;
    margin-top: 15px;
    overflow: hidden;
    border: 1px solid black;
}

footer img[usemap] {
    border: none;
   max-height: 100%;
    min-height:100%;
}


$('footer').css('height', '50%'); //now changing gets ok

Upvotes: 1

Seblor
Seblor

Reputation: 7136

If I understand correctly, you wand to resize the height of the footer, and get the image resizing with the same proportions ?

If this is what you need, I have a solution in this JSFiddle

Basically, You are resizing the footer, so the image is resizing it height. But the original image size never change, so does the width.

I added this code to change the image height (to make it the same as the footer) :

$('footer img[usemap]').height($("footer").height());

Upvotes: 0

Related Questions