0

我对这么“小”的东西有一个大问题，我无法弄清楚，我正在与这里的每个人联系。我遇到的问题是这样的：

我有大约 512 像素或 800 像素宽的照片，我想在圆形显示区域居中放置并保持悬停效果。我还需要调整照片的大小，以便居中的部分显示相当数量的照片。

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

我使用 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

4

3 回答 3

1

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

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

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

于 2013-02-22T20:39:29.263 回答
0

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

border-radius:50%;

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

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

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

于 2013-02-22T20:45:47.887 回答
0

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

我最终做的是在我的 A 标签周围包裹一个 DIV，如下所示：

然后，我像这样设置 A 的背景： style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">

最后，我制作了一个方形图像 (800 x 800) 进入 A 标签内部，使其保持圆形并使其完全透明，因此背景图像可见，同时以“响应式”方式增长和缩小。

于 2013-03-12T08:06:00.370 回答