Question

我有一个关于div容器内图像动态缩放的问题，我正在构建一个投资组合网站，其中包含3个项目图像，所有项目图像的宽度均可扩展但高度仍为静态（例如div container =＆gt;宽度33.33334％：高度250px）。

我对不同的CSS想法感到困惑，但布局总是打破，因为图像的尺寸和容器不同。我不熟悉CSS和JS，现在我不得不寻找一些建议，首先在哪里寻找解决方案，可能是一些代码创意/片段甚至更好的例子/ API等。

我已经做了一个小例子，我现在在哪里，因为你可以看到其中一个图像因尺寸较小而且布局坏了。

jsfiddle示例： jsFiddle example

对不起，我无法更精确地了解这种图像缩放技术被称为什么，因为我老实说不知道，这再次让我头疼搜索它。

最好的问候 MADS

Answer 1

我可能会对您要求的内容感到困惑，但如果您只是希望infoBlocks的大小保持一致，则可以使用width: 33.33%代替max-width: 33.33%和您的图片{{ 1}}

这是updated jsFiddle;那是你想要的吗？

Answer 2

尝试使用此方法以获得简单的网格。它会缩放图像以适合.image-box但保持纵横比。超出.image-box的图像的任何部分都会被溢出删除。

<强> HTML：

<div class="image-box">
    <div class="source">
        <img alt="Img_0106" src="http://www.team-bhp.com/forum/attachments/shifting-gears/1033178d1356977973-official-non-auto-image-thread-_mg_0143.jpg">
    </div>
</div>
<div class="image-box">
    <div class="source">
        <img alt="Img_0106" src="http://upload.wikimedia.org/wikipedia/commons/a/af/All_Gizah_Pyramids.jpg">
    </div>
</div>

<强> CSS

.image-box {
background: #000;
height: 170px;
width: 256px;
    float: left;
}
.image-box .source {
overflow: hidden;
width: auto;
height: 100%;
}
.image-box .source img {
width: 100%;
}

http://jsfiddle.net/A2cc6/

Answer 3

尝试仅设置高度或宽度而不是两者，这将尊重图像的比例。您还可以使用最小/最大宽度/高度。

也许你想要实现的是

.myimg { 身高：250px; 宽度：100％; }

这是图像的类，而不是div！如果您不希望它超过某个值，也可以添加最大宽度。

Answer 4

我可能已经找到了解决这个问题的jQuery解决方案 check this jsFiddel

or check my online exampel here

我在这里做的是，当页面完成加载时，我检查所有图像对它.box容器，以确定它需要哪个CSS样式。现在，图像按照容器缩放流体，下一步是将图像置于div容器中。

如果你的家伙有机会检查代码是否为跨浏览器编写得非常好，其他人也可以使用它:)。谢谢你的帮助。

快乐：D MADS

jQuery代码：

$(window).load(function() {
            plottingData();
            resizeImage();
        });

        $(window).resize(function() {
            plottingData();
            resizeImage();
        });

        function plottingData(){
            var image = $('.box img');
            var divW = $(".box").width();
            var divH = $(".box").height();
            var imgW = image.width();
            var imgH = image.height();
            $('.outputText').html('DIV CONTAINER W: '+divW+ ' H: ' +divH +'  ::  imgW: '+imgW +' : imgH: ' +imgH) ;
        }


        function resizeImage(){
            $("img").each(function(){
            var maxWidth = $(".box").width();; // Max width for the image
            var maxHeight = $(".box").height();;    // Max height for the image
            var maxratio=maxHeight/maxWidth;
            var width = $(this).width();    // Current image width
            var height = $(this).height();  // Current image height
            var curentratio=height/width;
            // Check if the current width is larger than the max

            if(curentratio>maxratio)
            {
                ratio = maxWidth / width;   // get ratio for scaling image
                /*
                $(this).css("width", maxWidth); // Set new width
                $(this).css("height", height *ratio); // Scale height based on ratio
                */
                $(this).css("width", "100%");
                $(this).css("height", "auto");
            }
            else
            { 
                /*
                ratio = maxHeight / height; // get ratio for scaling image
                $(this).css("height", maxHeight);   // Set new height
                $(this).css("width", width * ratio);    // Scale width based on ratio
                */
                $(this).css("width", "auto");
                $(this).css("height", "100%");
            }

        });
        }

CSS流体布局和动态图像缩放

4 个答案: