Html p标记内的可调整大小的img，其宽度大于容器

我使用的是Ghost博客平台，当我插入一个图像时，它会自动将图像包装在一个p标签中。我为包装p标签和img的容器设置了最大宽度。我希望img比容器大。我可以为img设置一个更大的宽度，

width:62rem但是它不再响应vs
宽度：100%

我希望在调整浏览器大小时调整img的大小，我希望在没有媒体查询的情况下这样做，但如果必要，我会这样做

我已经在更改所有p标记的大小，以便我的blockquote是容器部分的大小，我希望我的图像也这样做，但它只是p标记的大小。我主要关心的是使img更具响应性和更大的尺寸，我已经可以用指定的宽度使其更大，但它不再保持响应性

提前谢谢

代码

HTML

<section class="post-content">
<h1 id="designanddevelopmentprocessforatechnolgyserviceandrepaircompany">Design and Development Process for a technolgy service and repair company.</h1>

<blockquote>
  <p>Sketching is the first part of my process, sometimes I just play around in code, there is no exact process that I   follow, often my creative mood will push me in different directions.</p>
</blockquote>

<p>For Tech Basics I started playing in the browser, below is the evolution of the design.</p>

<p><img src="/content/images/techFull.png" alt="Alt text"></p>

<p>Always I will setup my site under a github repository, so I can see my changes as I go and have a good backup of my code.</p>

<p>After debating for a while of whether to use a Zurbs Foundation, I have decided to go with html5 boiler plate custom, I want the site to be as minimal as possible and it is simple enough I dont need a massive template to still to rapid development, however it is nice to have the goodies bundled with html5 boiler plate have the option to remove the stuff that I dont need. Below is a list of what I used and why.</p>


<p>I am using docpad for this project, docpad is like static pages on steroids. So far I am loving it for fast development. I am using the no template and building from scratch, plopping in my custom html5 boiler plater contents.</p>

<p>I read this article <a href="http://alistapart.com/article/the-infinite-grid">http://alistapart.com/article/the-infinite-grid</a> and it is a great starting point for creating a responive site. It really hits home the theory, and not so much specifics about a one fit solution for a website.</p>
</section>

您正在设置图像的100%宽度，但也给了它边框。这就造成了问题

您需要从图像中减去边框的数量

尝试：

我不认为你应该有一个特定大小的div，然后在其中有一个元素，然后从div中分离出来，因为你已经将它设置为大于
.container

我要做的第一件事是重新组织容器的工作方式。下面是一些基本的html参考

第二件事我要做的是问一个更有针对性的问题，关于在ghost论坛中删除图像中的自动p标签（假设它们现在已经存在）

在WordPress中，默认情况下也会发生这种情况。它看起来像这样，有一个运行正则表达式搜索和替换的函数。我打赌《幽灵》也会有类似的东西，或者很快就会有——因为这是一个巨大的痛苦——而且几乎没有人再将图像内联。如果他们这样做了，他们会想控制这种情况何时发生

function filter_ptags_on_images($content) {
  // do a regular expression replace...
  // find all p tags that have just
  // <p>maybe some white space<img all stuff up to /> then maybe whitespace </p>
  // replace it with just the image tag...
  return preg_replace('/<p>(\s*)(<img .* \/>)(\s*)<\/p>/iU', '\2', $content);
}

// we want it to be run after the autop stuff... 10 is default. ? ? ?
add_filter('the_content', 'filter_ptags_on_images');

图像上的函数过滤器（$content）{
//是否用正则表达式替换。。。
//查找所有刚创建的p标记
//可能是一些空白，然后可能是空白

//将其替换为图像标记。。。
返回preg_replace（'/（\s*）（）（\s*）/iU'，'\2'，$content）；
}
//我们想让它在自动扫描后运行。。。默认值为10？
添加_filter（“_内容”、“过滤器_ptags_on_图像”）；

祝你好运！我希望很快能和Ghost一起玩，我打赌这也是我遇到的第一个问题。
我不是投票否决你的人，但calc也有自己的问题，在这种情况下更像是绷带。很抱歉，边框仅用于测试目的，我实际上不打算使用它们这不是问题。我建议你这样做。这会让一切变得更好。从长远来看，我建议使用媒体查询来获得完全的响应。希望不使用媒体查询是一种奇怪的想法。他们是你最好的朋友！我通常希望我能使用@media规则。我同意媒体查询最终会被需要，我只是想在没有这些规则的情况下做同样多的事情，所以我的媒体查询不会变得太大。我会研究这个，这正是我想要弄清楚的。
#postSelect p img {
    width: calc(100% - 2rem);
    border: 1rem solid #fff;
}

function filter_ptags_on_images($content) {
  // do a regular expression replace...
  // find all p tags that have just
  // <p>maybe some white space<img all stuff up to /> then maybe whitespace </p>
  // replace it with just the image tag...
  return preg_replace('/<p>(\s*)(<img .* \/>)(\s*)<\/p>/iU', '\2', $content);
}

// we want it to be run after the autop stuff... 10 is default. ? ? ?
add_filter('the_content', 'filter_ptags_on_images');