Question

我正在为我的博客博客使用模板，其中图像设置为自动调整大小以适应整个宽度。因此，无论我向左还是向右对齐照片或调整照片大小，它们都将始终显示为全宽。但是，如果我用这段代码包含照片，我可以覆盖这一点：

<a href="##" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" src="##" id="BLOGGER_PHOTO_ID_5428874514942438946" style="cursor: hand; cursor: pointer; float: right; height: 240px; margin: 0 0 10px 10px; width: 320px;" /></a>

但是，每次创建帖子时，我都必须手动为每张照片添加此帖子，因为博主会自动为正确对齐的照片添加这段代码：

<a href="##" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="##" height="240" width="320" /></a>

但是上面的代码不会做到这一点，这也是之前帖子的一个问题。我在我的模板的xml文件中找到了一个部分，我相信它可以是设置图像大小的部分，这里是：

img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}

虽然我不确定它是否真的是那部分，但我不知道我是否可以改变它，这也是因为我对xml代码不好。

我有什么想法可以解决这个问题吗？感谢。

Answer 1

img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}

我认为上述部分可能是解决方案，实际上并非如此。在浏览代码时，我检查了可能与博客帖子相对应的所有宽度值，并找到了这一部分：

.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;width: 100%;
height: auto;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}

此处，width: 100%是强制所有图像显示全宽的部分。我的第一个解决方案是将其设置为width: auto，但它没有帮助。想在xml文件中指定宽度或高度是没有必要的，所以我继续去除宽度和高度，最终代码如下：

.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}

现在一切正常，所有图像都恢复原状尺寸。

P.S。下面还有另一个代码，它完全相同，但它控制着静态页面，我也用同样的方式修复它。

Answer 2

我遇到了同样的问题。我发现了@ H.Aziz建议的img类。

.post-image img{
    max-width:100%;
    height:auto;
}

但是根本没有删除宽度属性。我完成目标的方法是改变max-width：

.post-image img{
    max-width:50%;
    height:auto;
 }

这会将图像尺寸缩小到合适的尺寸。然而，出现的一个新问题是图像向左移动。为了解决这个问题，我做了最后的改变：

.post-image img{
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:50%;
    height:auto;
}

将图像带到父div的中心的一个常见技巧是使其成为自己的块并将边距属性应用于它。

在博客中删除自动调整大小

2 个答案: