jquery 多个 img 填充具有相同宽度的固定高度容器
jquery multiple img filling fixed height container with same width
我确信这个问题很容易解决,但经过几个小时的搜索,我最终post在这里寻求帮助。
我有一个固定高度和宽度的容器,让我们考虑作为一个大列。
上面显示了3张图片,大小不一。尺寸可以改变。
我希望调整图像大小以垂直填充该列(无需水平填充),并获得相同的宽度。 ("column" 外观)
我找到了一个 jquery 插件解决方案来横向执行此操作:jpictura。
它拍摄了 3 张图片,并尽可能大地显示它们,具有相同的高度,以准确填充行。
但现在我正在搜索相同的内容,但搜索的是垂直而不是水平。
让我们想象一个高度为 1000 像素、最大宽度为 800 像素的容器。
并在其上显示 3 张图片:
img1:800px * 1600px
img2:300px * 800px,
img3 : 1800px * 1600px
我的逻辑会告诉我遵循这些步骤(jquery):
计算 3 个图像占其容器 100% 宽度时的总高度。
计算我们必须将总高度减少多少百分比才能使其适合容器高度。
按照这个百分比缩小每张图片的大小。
但我满心疑惑...
也许有一个 jquery 插件可以以干净稳定的方式执行此操作。但只有我找不到它?
或者最坏的!我找到它并尝试了它,但无法以好的方式使用它.. ^^
有什么想法吗?
谢谢
[edit]这里有一些例子可以说明我想做什么。图像占用其容器的 100% 高度,它们都具有相同的宽度,没有丢失比例。
终于写了个小脚本,终于不那么难了:)
我想功能可以优化,我不是jquery的专家...
无论如何它为我完成了工作:拍摄所有图像,给它们相同的宽度,并使它们适合列的总高度。
精度:在我的例子中,我用它在 PDF 上很好地显示照片,所以我得到了与我的 A4 pdf 内容相对应的固定宽度和高度值。
无论您尝试显示多少张图片,它都有效。
JS :
function setImagesToFillAColumn() {
var maxWidth = 735;
var totalHeight = 0;
var availableHeight = 980;
//set all images to this max width and calculate total height
$('.pdf-a-column-images-container > img').each(function(){
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
var ratio = height / width;
var newHeight = maxWidth * ratio;
$(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes
$(this).css("height", newHeight+'px').css("width", maxWidth+'px'); // change css attributes
totalHeight = totalHeight + newHeight;
});
//calculate the reduction purcentage neddded for all the images fit to the row
var purcentageReduction = availableHeight / totalHeight;
if (purcentageReduction < 1) {
//reduce to this purcentage for all image size
$('.pdf-a-column-images-container > img').each(function(){
var finalHeight = $(this).height() * purcentageReduction;
var finalWidth = $(this).width() * purcentageReduction;
$(this).css("height", finalHeight+'px').css("width", finalWidth+'px'); // change css attributes
});
}
}
和html,很简单:
<div class="pdf-a-column-images-container">
<img src="urltoimg1" />
<img src="urltoimg2" />
<img src="urltoimg3" />
<img src="urltoimg4" />
</div>
为了另一种用途,我制作了相同的功能,但将图像适合一行(水平)而不是一列。
它将我给出的图像显示在一行中,高度相同,占行的 100%。
JS :
function setImagesToFillARow() {
var maxHeight = null;
var totalWidth = 0;
var availableWidth = 735;
//get the less high image height
$('.pdf-a-row-images-container > img').each(function(){
if (maxHeight === null || $(this).height() < maxHeight ) {
maxHeight = $(this).height();
}
});
//set all images to this height and calculate total width
$('.pdf-a-row-images-container > img').each(function(){
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
var ratio = height / width;
var newWidth = maxHeight / ratio;
$(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes
$(this).css("width", newWidth+'px').css("height", maxHeight+'px'); // change css attributes
totalWidth = totalWidth + newWidth;
});
//calculate the reduction purcentage neddded for all the images fit to the row
var purcentageReduction = availableWidth / totalWidth;
var finalHeight = maxHeight * purcentageReduction;
//set images container to the new height
$('.pdf-a-row-images-container').css('height', finalHeight+'px');
//reduce to this purcentage all image size
$('.pdf-a-row-images-container > img').each(function(){
var finalWidth = $(this).width() * purcentageReduction;
$(this).css("width", finalWidth+'px').css("height", finalHeight+'px'); // change css attributes
});
}
和 html :
<div class="pdf-a-row-images-container">
<img src="urltoimg1" />
<img src="urltoimg2" />
<img src="urltoimg3" />
<img src="urltoimg4" />
</div>
最后,fewcss规则,用于列和行显示:
.pdf-a-row-images-container {
white-space: nowrap;
line-height: 0;
font-size: 3px;
}
.pdf-a-column-images-container {
white-space: nowrap;
line-height: 1px;
padding-top: 25px;
}
.pdf-a-column-images-container img {
display: block;
margin: 1px auto;
padding: 0;
}
我知道它远非完美,但如果它能有所帮助的话:)
我确信这个问题很容易解决,但经过几个小时的搜索,我最终post在这里寻求帮助。
我有一个固定高度和宽度的容器,让我们考虑作为一个大列。
上面显示了3张图片,大小不一。尺寸可以改变。
我希望调整图像大小以垂直填充该列(无需水平填充),并获得相同的宽度。 ("column" 外观)
我找到了一个 jquery 插件解决方案来横向执行此操作:jpictura。 它拍摄了 3 张图片,并尽可能大地显示它们,具有相同的高度,以准确填充行。
但现在我正在搜索相同的内容,但搜索的是垂直而不是水平。
让我们想象一个高度为 1000 像素、最大宽度为 800 像素的容器。 并在其上显示 3 张图片: img1:800px * 1600px img2:300px * 800px, img3 : 1800px * 1600px
我的逻辑会告诉我遵循这些步骤(jquery):
计算 3 个图像占其容器 100% 宽度时的总高度。
计算我们必须将总高度减少多少百分比才能使其适合容器高度。
按照这个百分比缩小每张图片的大小。
但我满心疑惑...
也许有一个 jquery 插件可以以干净稳定的方式执行此操作。但只有我找不到它? 或者最坏的!我找到它并尝试了它,但无法以好的方式使用它.. ^^
有什么想法吗?
谢谢
[edit]这里有一些例子可以说明我想做什么。图像占用其容器的 100% 高度,它们都具有相同的宽度,没有丢失比例。
终于写了个小脚本,终于不那么难了:)
我想功能可以优化,我不是jquery的专家... 无论如何它为我完成了工作:拍摄所有图像,给它们相同的宽度,并使它们适合列的总高度。 精度:在我的例子中,我用它在 PDF 上很好地显示照片,所以我得到了与我的 A4 pdf 内容相对应的固定宽度和高度值。 无论您尝试显示多少张图片,它都有效。
JS :
function setImagesToFillAColumn() {
var maxWidth = 735;
var totalHeight = 0;
var availableHeight = 980;
//set all images to this max width and calculate total height
$('.pdf-a-column-images-container > img').each(function(){
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
var ratio = height / width;
var newHeight = maxWidth * ratio;
$(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes
$(this).css("height", newHeight+'px').css("width", maxWidth+'px'); // change css attributes
totalHeight = totalHeight + newHeight;
});
//calculate the reduction purcentage neddded for all the images fit to the row
var purcentageReduction = availableHeight / totalHeight;
if (purcentageReduction < 1) {
//reduce to this purcentage for all image size
$('.pdf-a-column-images-container > img').each(function(){
var finalHeight = $(this).height() * purcentageReduction;
var finalWidth = $(this).width() * purcentageReduction;
$(this).css("height", finalHeight+'px').css("width", finalWidth+'px'); // change css attributes
});
}
}
和html,很简单:
<div class="pdf-a-column-images-container">
<img src="urltoimg1" />
<img src="urltoimg2" />
<img src="urltoimg3" />
<img src="urltoimg4" />
</div>
为了另一种用途,我制作了相同的功能,但将图像适合一行(水平)而不是一列。 它将我给出的图像显示在一行中,高度相同,占行的 100%。
JS :
function setImagesToFillARow() {
var maxHeight = null;
var totalWidth = 0;
var availableWidth = 735;
//get the less high image height
$('.pdf-a-row-images-container > img').each(function(){
if (maxHeight === null || $(this).height() < maxHeight ) {
maxHeight = $(this).height();
}
});
//set all images to this height and calculate total width
$('.pdf-a-row-images-container > img').each(function(){
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
var ratio = height / width;
var newWidth = maxHeight / ratio;
$(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes
$(this).css("width", newWidth+'px').css("height", maxHeight+'px'); // change css attributes
totalWidth = totalWidth + newWidth;
});
//calculate the reduction purcentage neddded for all the images fit to the row
var purcentageReduction = availableWidth / totalWidth;
var finalHeight = maxHeight * purcentageReduction;
//set images container to the new height
$('.pdf-a-row-images-container').css('height', finalHeight+'px');
//reduce to this purcentage all image size
$('.pdf-a-row-images-container > img').each(function(){
var finalWidth = $(this).width() * purcentageReduction;
$(this).css("width", finalWidth+'px').css("height", finalHeight+'px'); // change css attributes
});
}
和 html :
<div class="pdf-a-row-images-container">
<img src="urltoimg1" />
<img src="urltoimg2" />
<img src="urltoimg3" />
<img src="urltoimg4" />
</div>
最后,fewcss规则,用于列和行显示:
.pdf-a-row-images-container {
white-space: nowrap;
line-height: 0;
font-size: 3px;
}
.pdf-a-column-images-container {
white-space: nowrap;
line-height: 1px;
padding-top: 25px;
}
.pdf-a-column-images-container img {
display: block;
margin: 1px auto;
padding: 0;
}
我知道它远非完美,但如果它能有所帮助的话:)