Question

我正在为一位朋友在一个新网站上工作，我正面临着一个用CSS border-radius掩盖的图像问题。

图像比容器更大更高，我使用JS来正确地居中。但是，谷歌Chrome和Safari似乎不支持我在这里尝试实现的功能......在Firefox上看起来很顺利。

我想知道如何在Chrome和Safari上解决这个问题。

目前只显示一张图片。

Answer 1

错误在您的javascript中。

在萤火虫中，铬给了我这个：

<article class="thumb-container" 
    style="width: 200px; height: 200px; margin-top: 10px; 
           background-color: rgb(216, 228, 125); 
           overflow-x: hidden; overflow-y: hidden; ">   
    <figure style="opacity: 1; ">
        <img src="img/pic001_thumb.jpg" title="work 1" style="top: 100px; left: 100px; ">
    </figure>
</article>

和firefox给了我这个：

<article class="thumb-container" 
    style="width: 200px; height: 200px; margin-top: 10px; 
           background-color: rgb(216, 228, 125);">  
    <figure style="opacity: 1;">
        <img title="work 1" src="img/pic001_thumb.jpg" style="top: -78px; left: -25px;">
    </figure>
</article>

您可以看到style标签上的img属性存在差异。我快速浏览了一下javascript并没有看到任何明显的内容，但那将是一个开始的地方。

Answer 2

您已完全定位img元素。如果您使figure（其父级）相对定位，则图像将在chrome中正确居中。

所以，只需从

更改figure的css即可

<figure style="opacity: 0; ">
  <img src="img/pic001_thumb.jpg" title="work 1" style="top: 100px; left: 100px; ">
</figure>

到

<figure style="position: relative; opacity: 0; ">
  <img src="img/pic001_thumb.jpg" title="work 1" style="top: 100px; left: 100px; ">
</figure>

正如swatkins指出的那样，您的javascript似乎为不同的浏览器设置了不同的left和top值。我会想通过css找到一个常见的修复方法。

我在这台机器上没有FF，但position: relative也可能适用于该浏览器。

使用CSS / border-radius屏蔽图像

2 个答案: