水平居中图像不知道宽度

时间:2013-03-15 01:12:27

标签: css image centering

我试图将图像居中在div而不控制图像宽度。您可以在此处查看精选商品的示例:

http://citylightsrealtygroup.com/

由于这是由管理员更新的功能,我无法控制。代码看起来像这样但它的中心仍然排列在左边缘:

.feature_thumb img{
    width:auto;
    height:100%;
    display:block;
    margin-left: auto;
    margin-right: auto;
}

使用拇指的纵横比将高度设置为自动并让宽度溢出而不是相反的情况要好得多。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

你使用太大的图像会在较慢的带宽上慢慢加载;应该生成缩略图以防止这种情况发生。我建议你以编程方式或使用timthumb生成它们 - https://code.google.com/p/timthumb/

使用它时,脚本将自动居中,裁剪和调整图像大小。你只需要指定宽度和高度

<img src="timthumb.php?src=IMAGE_SOURCE&w=WIDTH&h=HEIGHT" />

答案 1 :(得分:0)

听起来这个问题可能会使用一点清理。您可能希望发布一个跟进来询问您提到的其他一些问题。但要回答手头的问题,关于将图像置于其父级中...而不是在图像本身上设置CSS属性,请在图像的父级上将text-align设置为center div