CSS帮助响应主题

我有一个很大的问题，因为一些“小”的东西我无法理解，我正在联系这里的每个人。我遇到的问题是：

我有大约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%;

}

}

这是我的开发页面的链接

---

您是否考虑过将图像设置为div的背景？这样可以保留所有已使用的效果，并且可以在不影响外部div的情况下操纵背景位置。拥有完美圆形div的其他可能解决方案是使用：：after伪类，如本图库教程中所示：

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

附：顺便说一下，这是一个漂亮的测试页面。

---

首先，只需将边界半径设置为50%即可使某个对象成为一个圆，如果每个角都是相同的值，则只需输入一次，如下所示：

border-radius:50%;

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

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

---

最重要的是，我没有看到你链接的页面上实际声明的宽度或高度。你确定你把他们放在了正确的班级吗？我看到边界半径声明，但我只看到最大宽度：100%；不是宽度：200px或高度：200px我重新思考了使用图像作为元素背景的建议的问题，正如上文所述

我最后做的是在我的a标签上缠绕一个DIV，如下所示：

然后，我将A的背景设置为：style=“background:url（这里是照片url）不重复；background position:center；”>

最后，我制作了一个方形图像（800 x 800）放在a标签的内部，这样它可以保持圆形，并使其完全透明，这样背景图像就可以看到，同时以“响应”的方式增长和收缩

border-radius:50%;