如何让来自SmugMug的嵌入图片占据博客帖子的全宽

时间：2012-03-24 作者：Babouchk

我试图实现的目标是：让博客文章中的图像占据博客文章的全部宽度，并保持图像比例。也就是说，肖像画最终会比风景画更大。

挑战在于，我没有使用wordpress服务器上的图像，而是使用smugmug上的图像。Hense，我正在使用像这样的嵌入图像（只需在用html编写的帖子中删除链接，而不是wysiwyg）http://nickpelletier.smugmug.com/Category/From-nickpelletiercom/21943413_P6Mzn6#!i=1750174498&k=5SsSHBq&lb=1&s=A

我在这里尝试了设置：设置->媒体->嵌入，并为宽度留下一个空白值。这适用于横向图像，但不适用于纵向图像。肖像图像仍然使用高度，使得任何大小比不同的图片的宽度都不同。

我尝试了许多模板（包括10-11），但都有相同的问题。因此，我认为Wordpress实际上就是这样工作的。

话虽如此，我正在寻找如何在代码中更改此行为（如果可能，请使用模板，如果最坏情况下使用wordpress）。

我是一名程序员，每天都在做后端代码。我可能对代码部分没什么意见，但我对php、wordpress（这是我第一个建立的博客）一无所知，而且对web\\html还相当陌生。如果您能提供任何先看哪里的线索，我们将不胜感激。

--EditHere是一个带有肖像图像的页面（第一个来自smugmug，第二个来自flickr）http://nickpelletier.com/2012/03/19/alphonse-et-dorimene-desjardins/

设置->媒体->嵌入中的当前值为宽度：无，高度：1500

我希望图像的最大列宽，而不是高度为1500

2 个回复
最合适的回答,由SO网友:Charles 整理而成

根据您在编辑后的答案中提供的链接，以下内容对您适用：

.postcontent img {
  height: auto;
  width: 630px;
}
这可以按照你的习惯。css文件。确保在进行更改后清除缓存并刷新。

SO网友:Charles

如果我理解正确的话，您是在使用Wordpress自动嵌入将图像插入到您的帖子中。如果是这种情况，Wordpress会像将图像编码到模板中一样输出图像代码：

<img src="http://example.com/image.jpg">
因此，您可以使用CSS将图像宽度设置为100%，高度设置为自动：

#article img {
 width: 100%;
 height: auto;
}
这将使所有图像成为帖子区域的全宽，并且高度将与宽度成比例。

确保将上面示例中的div id更改为主题包含帖子内容的任何内容的div。

如果由于任何原因100%不起作用，您可以使用帖子内容区域的像素宽度。

#article img {
 width: 600px;
 height: auto;
}

结束
标签： embed   小码农  

相关推荐

在编辑器中添加oEmbedded代码的标记？

有没有办法在可视化编辑器中为oEmbed代码提供特殊标记？在my dream实现中，您可以在编辑器中粘贴一个启用oEmbed的url，然后编辑器会自动将其替换为要插入的媒体对象的缩略图。一个基本的实现至少会突出显示URL，以便用户知道那里可能会发生“特殊情况”(if no errors occur).有没有这样的插件？我可以自己创建这样的东西，但我需要一些关于如何以最具WordPress风格的方式连接到TinyMCE编辑器的指针。