1

I have a question about dynamic scaling of images within a div container, I'm building a portfolio website which have 3 col's of project images all scalable in width but static in height (e.g. div container => Width 33.33334% : Height 250px).

I've puzzled around with different CSS ideas but the layout always breaks since the images differ in dimensions as well as the container. I'm not that skilled in CSS nor JS and now I'm kind of stuck looking for some advice firstly where to look for an solution, perhaps some code ideas/snippets or even better examples/API's etc.

I've made an small example of where I am now, as you can see one of the images is smaller due to it's dimensions and the layout is broken.

jsfiddle example: jsFiddle example

I'm sorry I can't be more precise on what this image scaling technique is called since I honestly don't know, which again gives me a headache googling it.

best regards Mads

4

4 回答 4

0

Try this method for an easy grid. It scales the image to fit the .image-box but keeps the aspect ratio. Any part of the image that exceeds that .image-box is removed by overflow.

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/

于 2013-03-31T22:03:53.647 回答
0

Try setting only height or width not both, this will respect the ratio of the image. You can also play with min/max width/height.

Maybe what you are trying to achieve is

.myimg { height: 250px; width:100%; }

This is the class of the image, not the div ! You can also add a max-width if you don't want it to go higher than a certain value.

于 2013-03-31T22:06:36.387 回答
0

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

或在这里查看我的在线示例

我在这里做的是，当页面加载完成后，我会对照它检查所有图像 .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%");
            }

        });
        }
于 2013-04-02T21:25:06.113 回答
0

我可能会对您的要求感到困惑，但如果您只想让 infoBlocks 的大小保持一致，您可以使用width: 33.33%而不是max-width: 33.33%和您的图像width: 100%; height: 100%;

这是一个更新的 jsFiddle；那是你想要的吗？

于 2013-03-31T21:58:54.387 回答