我有一些图片在一个容器中，我想添加一个覆盖和图标。这不是现成的，但我找到了一些有用的代码：

HTML：

<div class="main">
    <span class="featured"><img src="http://joshrodg.com/IMG_001-258x258.jpg" title="" alt=""></span>
</div>

CSS：

.featured {
    display: inline-block;
    margin: 30px 20px 0;
    position: relative;
}

.featured img {
    vertical-align: top;
    width: 100%;
}

.featured:hover {
    cursor: pointer;
}

.featured:after {
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    content: \'\\A\';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    /* Transition */
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.featured:hover:after {
    color: #fff;
    content: \'\\f2f5\';
    font-family: "Ionicons";
    font-size: 20px;
    opacity: 1;
}

jQuery：

$(document).ready(function(){
    var img = $(".featured > img");
    $(".featured").css({width:img.width(), height:img.height()});
});

我喜欢这段代码，因为它很简单，可以处理图像，而不考虑其尺寸。

<span class="featured"><img class="alignright size-medium wp-image-75" src="http://joshrodg.com/wp-content/uploads/IMG_001-300x225.jpg" alt="" width="300" height="225"></span>

不幸的是，如果我有专门对齐的帖子图像，这段代码将打破这一点。。。在保留图像上的alignright、alignleft或aligncenter类的同时，是否有任何方法可以执行相同的操作？

谢谢，乔希

$( ".alignright" ).parent().addClass( "alignright" );
$( ".alignleft" ).parent().addClass( "alignleft" );
$( ".aligncenter" ).parent().addClass( "aligncenter" );