Last active
July 1, 2021 10:59
-
-
Save alex-boom/d1929c3a7ebf867da3a8f0113679b8bc to your computer and use it in GitHub Desktop.
img-style-width-height-ratio
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
init image height | |
*/ | |
img | |
// рабочий вариант | |
jQuery(function () { | |
initImgHeight() | |
jQuery(window).on('resize orientationchange', function () { | |
initImgHeight(); | |
}); | |
}); | |
function initImgHeight() { | |
jQuery(document).ready(function () { | |
jQuery('.block-portfolio img').each(function () { | |
var maxWidth = 500; | |
var width = jQuery(this).width(); | |
var height = jQuery(this).attr('height'); | |
var ratioW = maxWidth / width; // Width ratio | |
// If height ratio is bigger then we need to scale height | |
jQuery(this).css("width", maxWidth / ratioW); | |
jQuery(this).css("height", height / ratioW); // Scale height according to width ratio | |
}); | |
}); | |
} | |
//не совсем рабочий нужно доводить и править | |
function initImgHeight() { | |
jQuery(document).ready(function () { | |
jQuery('.block-portfolio img').each(function () { | |
var maxWidth = jQuery(this).width(); | |
var maxHeight = 9999; | |
var width = jQuery(this).width(); | |
var height = jQuery(this).height(); | |
var ratioW = maxWidth / width; // Width ratio | |
var ratioH = maxHeight / height; // Height ratio | |
// If height ratio is bigger then we need to scale height | |
if (ratioH > ratioW) | |
{ | |
jQuery(this).css("width", maxWidth); | |
jQuery(this).css("height", height * ratioW); // Scale height according to width ratio | |
} | |
else | |
{ // otherwise we scale width | |
jQuery(this).css("height", maxHeight); | |
jQuery(this).css("width", height * ratioH); // according to height ratio | |
} | |
}); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment