Skip to content

Instantly share code, notes, and snippets.

@alex-boom
Last active July 1, 2021 10:59
Show Gist options
  • Save alex-boom/d1929c3a7ebf867da3a8f0113679b8bc to your computer and use it in GitHub Desktop.
Save alex-boom/d1929c3a7ebf867da3a8f0113679b8bc to your computer and use it in GitHub Desktop.
img-style-width-height-ratio
/*
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