我正在使用 Ghost 博客平台,当我插入图像时,它会自动将图像包装在 p 标签中。我有一个包装 p 标签和 img 的容器的最大宽度设置。我希望 img 比容器大。我可以为 img 设置一个更大的宽度 width: 62rem;
但是它不再响应 width: 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>
CSS
/* line 1, ../scss/screen.scss */
body {
font-size: 16px;
font-family: 'Cabin', sans-serif;
}
/* line 6, ../scss/screen.scss */
a {
color: #FA7FB5;
text-decoration: none;
}
/* line 16, ../scss/screen.scss */
#postSelect {
max-width: 82rem;
margin: auto;
}
/* line 20, ../scss/screen.scss */
#postSelect .tag-case-study {
max-width: 62rem;
margin: auto;
}
/* line 26, ../scss/screen.scss */
#postSelect .post-header {
position: fixed;
left: 1rem;
top: 1rem;
}
/* line 41, ../scss/screen.scss */
#postSelect .share {
text-align: center;
}
/* line 43, ../scss/screen.scss */
#postSelect .share a {
padding: 1rem;
}
/* line 48, ../scss/screen.scss */
#postSelect .author {
text-align: center;
font-variant: small-caps;
letter-spacing: 0.2rem;
font-size: 3rem;
}
/* line 55, ../scss/screen.scss */
#postSelect .post-title {
font-size: 1rem;
font-weight: 900;
font-style: italic;
text-align: center;
}
/* line 62, ../scss/screen.scss */
#postSelect .post-meta {
font-size: 1rem;
font-weight: 900;
font-style: italic;
text-align: center;
display: block;
}
/* line 70, ../scss/screen.scss */
#postSelect p {
max-width: 42rem;
margin: auto;
font-size: 1.5rem;
font-weight: 300;
line-height: 3rem;
padding: 2rem 0 2rem 0;
}
/* line 78, ../scss/screen.scss */
#postSelect p img {
width: 100%;
border: 1rem solid #fff;
}
/* line 84, ../scss/screen.scss */
#postSelect blockquote {
margin: 0;
padding: 2rem;
}
/* line 88, ../scss/screen.scss */
#postSelect blockquote p {
max-width: 60rem;
margin: 0;
text-align: center;
}
/* line 94, ../scss/screen.scss */
#postSelect blockquote:before {
content: url("../img/quote.png");
}
/* line 98, ../scss/screen.scss */
#postSelect blockquote:after {
content: url("../img/quoteB.png");
margin-left: 97.4%;
}
/* line 102, ../scss/screen.scss */
#postSelect ul {
max-width: 42rem;
margin: auto;
line-height: 3rem;
padding: 0;
}
/* line 107, ../scss/screen.scss */
#postSelect ul li {
list-style-type: square;
font-size: 1.5rem;
margin: 0;
}
/* line 114, ../scss/screen.scss */
#postSelect .post-content h1 {
font-size: 2.5rem;
letter-spacing: 0.1rem;
text-align: center;
color: #69BDFF;
}
最佳答案
我不认为你应该有一个特定大小的 div,然后在其中有一个元素,然后 break 从 div 中出来,因为你已经将它设置得比 .容器
第一件事 我要做的是重新组织容器的工作方式。这是 a FIDDLE一些基本的 html 以供引用。
第二件事我会做 - 提出一个更有针对性的问题,关于从幽灵论坛的图像中删除自动 p 标签(假设它们现在存在)。
在 WordPress 中,这也是默认情况下发生的。它看起来像这样,带有一个运行正则表达式搜索和替换的函数。我敢打赌 ghost 会有这样的东西,或者真的很快就会有——因为这是一个巨大的痛苦——而且几乎没有人再将图像放入内联。如果他们这样做了,他们会想要控制这种情况何时发生。
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');
祝你好运!我希望尽快使用 Ghost,我敢打赌这也是我遇到的第一个问题。
关于html - p 标签内可调整大小的 img,其宽度大于容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20321910/