0

Ghost ブログ プラットフォームを使用しています。画像を挿入すると、画像が自動的に ap タグでラップされます。p タグと img をラップするコンテナーの最大幅のセットアップがあります。imgをコンテナよりも大きくしたい。より大きなimgの幅を設定できますが、width: 62rem;レスポンシブではなくなりましたvswidth: 100%;

ブラウザのサイズを変更するときに画像のサイズを変更したいのですが、メディアクエリなしでそれを行うことを望んでいましたが、必要に応じてそうします。

blockquote がコンテナー セクションのサイズになるように、すべての p タグのサイズを既に変更しています。イメージも同じようにしたいのですが、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;
}
4

2 に答える 2

1

特定のサイズの div と、その中の要素が div より大きく設定されているため、div から抜け出す必要はないと思います。.container

私が最初にすることは、コンテナの仕組みを再編成することです。これは、参照するいくつかの基本的な htmlの FIDDLEです。

私がする2 番目のことは、ゴースト フォーラムで画像から自動 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');

幸運を！近いうちに Ghost でプレイしたいと思っていますが、これは私が最初に遭遇する問題でもあると思います。

于 2013-12-02T07:02:45.547 に答える