Question

我遇到了一个很大问题，如此“小”，我无法弄明白，我正在向所有人伸出援手。我遇到的问题是：

我的照片大约是512px或800px宽我想要适合中心，在圆形显示区域并保持我的悬停效果。我还需要为照片调整尺寸，使居中的部分显示相当数量的照片。

如果照片是完美的正方形，我正在使用的当前代码将使它们成为完美的圆圈。问题是当照片是一个矩形时，它会变成一个椭圆形。

我使用overflow：hidden和css创建了一个如下所示的div，但它与当前的CSS冲突。非常感谢任何帮助！

.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;

}

img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;

}

这是我的开发页面的链接。

http://www.lmcodebox.com/b-test/index5.html

http://www.lmcodebox.com/b-test/portfolio.html

Answer 1

您是否考虑过将图像设置为div的背景？通过这种方式，您可以保留已经使用的所有效果，并且可以在不影响外部div的情况下操纵背景位置。其他可能的解决方案是拥有完美的圆形div，就是使用:: after伪类，就像在这个库教程中一样： http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2

对不起，如果我误解了你，希望它有所帮助。

PS：顺便说一句漂亮的测试页。

Answer 2

首先，您只需要将边框半径设置为50％即可创建圆形，如果每个角都是相同的值，那么您可以像这样输入一次：

border-radius:50%;

只要这些图像是矩形，您可以将图像设置为跨度的背景，给它一个高度和宽度，形成方形并使用显示块。这样可以使照片保持比例，但可以让它们成为正方形。

但是，如果要显示大量图像，可能会造成一些标记混乱。另一个解决方案，意味着更多的工作，但我个人会这样做，就是用photoshop或其他一些图像编辑工具将图像裁剪为正方形的缩略图。

最重要的是，我没有看到您链接的页面上实际声明的宽度或高度。你确定你把他们放在了正确的班级吗？我看到声明的边界半径，但我只看到最大宽度：100％;不宽度：200px或高度：200px

Answer 3

我重新考虑了使用图像作为元素背景的建议的问题，如 madaaah 所做的那样。

我最终做的是将DIV包裹在我的A标签周围：

然后，我将A的背景设置为：style =“background：url（PHOTO URL HERE）no-repeat; background-position：center;”＆gt;

最后，我制作了一个正方形图像（800 x 800）进入A标签，这样它就会保持圆形并使其完全透明，因此背景图像可见，同时以“响应”方式增长和缩小

CSS帮助响应主题

3 个答案: