CSS div 缩放浏览器时位置变得混乱

Question

我正在为基于网格图像布局的 Facebook 应用程序开发一个网站。下面的代码对我来说工作正常，但是当我缩放我的浏览器时，一切都变得一团糟。具有 100% 缩放视图的浏览器有效。如果可能，请帮我找到一些其他代码或修复以下代码。

<style>
div.img {
        margin: 5px;
        padding: 5px;
        border: 1px solid #0000ff;
        height: auto;
        width: auto;
        float: left;
        text-align: center;
    }   

    div.img img {
        display: inline;
        margin: 5px;
        border: 1px solid #ffffff;
    }

    div.img a:hover img {
        border: 1px solid #0000ff;
    }

    div.desc {
      text-align: center;
      font-weight: normal;
      width: 120px;
      margin: 5px;
    }
 </style>

HTML:

<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="image1.jpg" alt="PHOTO" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis2_big.htm"><img src="image2.jpg" alt="PHOTO" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis3_big.htm"><img src="image3.jpg" alt="PHOTO" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis4_big.htm"><img src="image4.jpg" alt="PHOTO" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>

Answer 1

在这种情况下，您必须使用 CSS 的 calc() 函数来计算页面调整大小或缩放时每个图像的正确宽度：

width: calc(24.9% - 22px);

我使用 22px 的原因：2 * (margin + border.width + padding) 每张图片。

肯定会使用 24.9% 而不是 25。

查看工作FIDDLE here

Answer 2

我更新了 Sdghasemi 的 fiddle。为没有宽度计算功能的旧浏览器添加回退并将图像宽度设置为 100% 并稍微清理 Html （关闭图像标签等）图片流出容器div的原因是HTML中的width和height属性。我现在将它设置为 100% 的容器。由于边框，意味着 100% -2px。与图片标题相同。

<div class="img">
    <a target="_blank" href="klematis_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <a target="_blank" href="klematis2_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <a target="_blank" href="klematis3_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <a target="_blank" href="klematis4_big.htm">
        <img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
    </a>
    <div class="desc">Add a description of the image here</div>
</div>

css:

div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: 24%;
    width: calc(25% - 22px);
    float: left;
    display: block;
    overflow: hidden;
    text-align: center;
    font-size: 100%;
}   

div.img a:hover img {
    border: 1px solid #0000ff;
}

div.img img{
    width: 99%;
    width: calc(100% - 2px);
    border: 1px solid #fff;
}

div.desc {
  text-align: center;
  font-weight: normal;
  width: 100%;
  width: calc(100% - 10px);
  margin: 5px;
}

http://jsfiddle.net/or2ua75e/5/

CSS div 缩放浏览器时位置变得混乱

CSS div position gets messed up on zooming the browser

css