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;

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

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

3 个答案: