Question

我放置的图像左侧有一个，右侧有两个。当我调整浏览器窗口的大小时，图像会缩放。

我遇到的问题是在Safari和Firefox中图像可以正确缩放和保持位置，但在Chrome中，当我调整浏览器大小时，图像位置会发生变化。

以下是展示问题的jsfiddle示例：

以及代码的副本：

        #col1{
           width:50%;
           float:left; 
        }

        #col2{
           width:50%;
           float:left; 
        }

        #img1{
           width:50%;
           float:right;
           clear:both;
        }

        #img2{
           width:50%;
           float:right;
           clear:both;
        }

        #img3{
           width:50%;
        }
    

            <div id="col1">
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
    </div>
    <div id="col2">
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
</div>

Answer 1

只需将图片3 的宽度从50％更改为49％ ....

#img3 {
width:49%;
}

工作示例here

Answer 2

将图像宽度更改为49％会产生一些难看的差距，但我最终确定了一个解决方案。

似乎是“clear：both”css正在发送chrome疯狂，所以我重新排序了元素并删除了对clear属性的需求，现在它可以正常工作。

如果有人能提供我的原始代码在Chrome中不起作用的原因，我很想知道。

http://jsfiddle.net/AC5BJ/1/

#col1{
   width:50%;
    float:left; 
}

#col2{
   width:50%;
    float:left; 
}

#img1{
    width:50%;
    float:right;
    /*clear:both;*/
}

#img2{
    width:50%;
    float:right;
    /*clear:both;*/
}

#img3{
    width:50%;
    float:left;
}

    <div id="col1">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">  
    </div>
    <div id="col2">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
</div>

为什么图像在使用chrome缩放时移动位置，而不是在firefox或safari中移动

2 个答案: