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

我有一个关于

div

容器中图像动态缩放的问题，我正在构建一个公文包网站，其中有3列项目图像，所有图像在宽度上都可缩放，但在高度上是静态的（例如

div

container=>width 33.33334%:height 250px）

我对不同的CSS想法感到困惑，但布局总是会中断，因为图像的尺寸和容器都不同。 我对CSS和JS都不太在行，现在我一直在寻找一些建议，首先在哪里寻找解决方案，也许是一些代码想法/片段，甚至更好的示例/API等等

我已经做了一个小例子，我现在在哪里，因为你可以看到一个图像更小，因为它的尺寸和布局是打破

JSFIDLE示例：

很抱歉，我无法更准确地描述这种图像缩放技术的名称，因为我真的不知道，这让我在谷歌上搜索它时又感到头疼

致意

---

Mads

我可能会对您的要求感到困惑，但如果您只是希望信息块的大小保持一致，您可以使用

宽度：33.33%

而不是

最大宽度：33.33%

和图像

宽度：100%；身高：100%

这是一个例子；这就是你想要的吗？
尝试这种方法，以获得一个简单的网格。它缩放图像以适应
.image框
，但保持纵横比。图像的任何部分超过
。图像框
的部分将被溢出删除

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>

尝试仅设置高度或宽度，而不是同时设置两者，这将考虑图像的比率。你也可以玩最小/最大宽度/高度

也许你想要达到的是

myimg{
高度：250px；
宽度：100%；
}

这是图像的类，而不是div！
如果您不希望它高于某个值，也可以添加一个最大宽度。
我可能已经找到了解决此问题的jQuery解决方案


我在这里做的是，当页面加载完毕后，我会对照它检查所有图像。box容器，以确定它需要哪种CSS样式。瞧，现在图像根据容器缩放流体，下一步是将图像置于div容器的中心

如果您有机会检查代码是否为跨浏览器正确编写，这将非常好，其他人也可能会使用它：）。
谢谢你的帮助

快乐：D
马德斯

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%");
            }

        });
        }

：D实际上，这涵盖了我在一致宽度方面遇到的另一个问题，但我认为我最好同时执行一项任务：）谢谢：）谢谢，我做了一些测试，遗憾的是，这似乎不起作用，例如。尝试将宽度设置为%，或将宽度和高度更改为ex.200px，然后您将看到黑色背景颜色，在这里，系统应通过其高度进行缩放，以确保图像将填充溢出到右侧的孔容器。。这就是我的问题所在。。。该死，这在asctionscript中很容易：（呵呵，对了。将
img
更改为
height:100%；
替换
width
，如果你愿意的话。不，实际上两者都不需要，但系统需要知道图像是在“风景”还是“肖像”中维度，我只识别CSS是不行的，这意味着必须使用jQuerry…我有时间的时候会研究它：/但是这会使我识别的图像倾斜，图像必须保持它的比例，基本上系统“只是”需要根据图像和容器的尺寸确定枯萎宽度或高度是否应为100%或自动，然后向需要的方向溢出。我的意思是，如果没有JS，这甚至是不可能的，但我需要一些帮助，找到正确的位置开始这一步：D
$(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%");
            }

        });
        }