Question

当我加载网站时，大约30％的时间我的英雄形象都是错位的。

网站：tomcritchlow.com

未对齐图片的屏幕截图：http://i.imgur.com/a2eeun3.png

谢谢！

编辑：这里是代码，所以您不必访问该网站：

.container{
width:700px;
margin:auto;    
}

.roundimage{
 -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    display:block;
    overflow: hidden;
}

HTML：

<div class="roundimage"><img class="homepageimg" src="http://i.imgur.com/j9NkIPK.jpg?1" /></div>

Answer 1

由于您的容器是固定宽度，您可以添加

margin: 20px 20px 20px 200px;

到你的英雄形象的css。

另一个好方法是将圆形容器与图像分开，因为可能由于图像加载延迟而导致错误。容器可能是：

<强> HTML：

<div id="heroimage">
    <img src="your_image_url">
</div>

<强>的CSS：

#heroimage {
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    display:block;
    overflow: hidden;
}

图像在约30％的页面加载时未对齐

1 个答案: