Question

我有一个div，我有一个图像的gallary，我动态填充图像，现在说如果没有图像增加我希望图像减小尺寸，适合div

<div class="gallary">
    <img src="img/img1.jpg">
    <img src="img/img2.jpg">
    <img src="img/img3.jpg">
    <img src="img/img4.jpg">
</div>

无论如何，这可以在客户端使用java脚本或jquery实现吗？

Answer 1

哟可以写一个javascript。按照以下三个步骤。 1.您可以运行循环来计算图像数量。 2.按图像数量划分div宽度。 3.将结果设置为每个图像宽度。

Answer 2

当然，你必须在你的javascript中加入缩放功能，我也会使用php。

当页面加载时，可以使用php（如果来自数据库）计算图像数量并将其存储为表单值或直接用作全局变量（使用php echo，否则如果没有图像可以启动＃39; t需要这样做）。然后，当动态添加每个图像时，您需要添加计数器功能。

假设图像大小相同且图库div为正方形，请添加仅对图像唯一的类名（例如＆＃34; imageClass＆＃34;），然后使用jquery更新大小。

//I'm assuming gallery is a square of height 800px and width 800px...change as necessary...this function would produced square images...if rectangular images are desired, you would need to scale images by the length : width ratio

functon resizeImages() {
    var counter = document.forms.MyForm.imageCount.value;//or 0 if no images to start
    var newImageWidth = 800 / counter;
    var newImageHeight = 800 / counter;
    $(".imageClass").css("width", newImageWidth);
    $(".imageClass").css("height", newImageHeight);
}

如果没有图像增加，请调整图像大小以适合div

2 个答案: