html - 如何使用 CSS 背景位置在 img 标签中居中图像

Question

我正在使用 HTML IMG 标签来获取/链接图像，并且我想将它放在一个 div 中，但我没有取得太大的成功。

我的html是：

     <div class="alimgholder">
<img  title="<?php echo $album_title;?>" alt="<?php echo $album_title;?>" src="<?php echo $album_pic;?>">
     </div>   

我的CSS是：

              .alimgholder
             {
             width:160px;
             height:120px;
             overflow:hidden;
             float:left;
             }
             .alimgholder img
             {

             background-color: #EEEEEE;
             background-position: center 25%;
             background-repeat: no-repeat;
             display: block;
             }

Answer 1

仅为 div 设置 css -

.alimgholder
         {
         width:160px;
         height:120px;
         overflow:hidden;
         float:left;
         background-image: url(path/to/your_image);
         background-color: #EEEEEE;
         background-position: center 25%;
         background-repeat: no-repeat;
         display: block;
         }        

现在对于动态问题 - 您可以使用 img 标签来加载图像，但隐藏它并读取它的 src 只是为了使用 jQuery 设置背景，就像这样 -

 $("#div_id").css("background-image", $("#img_id").attr("src"));

Answer 2

.alimgholder
{
     ...
     text-align: center;
}

否则你正在对齐图像的背景图像。

编辑：如果您希望将图像定义为 div 的背景，则必须从 css 加载它并忘记您的 img 标签：

.alimgholder
{
     background: url(path/to/image) center no-repeat;
     ...
}

Answer 3

如果您只有 div 中的图像，您可以使用：

margin-left: auto;
margin-right: auto;

在您的.alimgholderCSS 代码中，但这会使整个内容<div>水平居中。