CSS：ビューポートの幅が<a href="http://test.doig.com.au/vm-home.html" rel="nofollow noreferrer">this page</a>で

Question

を減少すると、画像の縦横比を維持し、3「戸口」のグラフィックがあります。

<div class="textwidget">  
    <div class="one-third first"> 
     <div id="doorway1" class="doorway"> 
      <h3>The Best Core Exercise Ever</h3> 
      <div class="doorway-action"> 
       <a href="http://vmpersonal.com/product/core-strength-level-1/"><img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now</a> 
      </div> 
     </div> 
    </div> 
    <div class="one-third"> 
     <div id="doorway2" class="doorway"> 
      <h3>Core Strength Level 1 Program</h3> 
      <div class="doorway-action"> 
       <a href="http://vmpersonal.com/product/core-strength-level-1/"><img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now</a> 
      </div> 
     </div>   
    </div> 
    <div class="one-third"> 
     <div id="doorway3" class="doorway"> 
      <h3>Cardio Program</h3> 
      <div class="doorway-action"> 
       <a href="http://vmpersonal.com/product/cardio-fitness-level-1/"><img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now</a> 
      </div> 
     </div>   
    </div> 
</div> 

が、私はそれらを含むグラフィックスとdivをしたいのですが応答する。

これらはdiv.one-thirdコンテナに含まれています。

画像は409px x 292pxで、高さは71.39364303%です。

私はCSSを使用する場合と思った：

#doorway1 {background-image: url('images/doorway1.png'); height: 71.39364303%;} 
#doorway2 {background-image: url('images/doorway2.png'); height: 71.39364303%;} 
#doorway3 {background-image: url('images/doorway3.png'); height: 71.39364303%;} 

をビューポートの幅が減少したが、彼らは、画像が切断されていないとして、彼らはdiv.one-thirdにスケールダウンします。

ビューポートの幅が小さくなると画像のアスペクト比を一定に保つにはどうすればよいですか？

ヘルプありがとうございます。

更新：AJファンクはバックグラウンドイメージを縮小するのに役立ちましたが、それを含むdivも比例的に小さくするにはどうすればよいですか？

Answer 1

あなたが設定する必要がbackground-sizeあなたは2つの選択肢があり

#doorway1, 
#doorway2, 
#doorway3 { 
    background-size: contain; 
} 

Answer 2

containへ：

は（あなたは、何の作物フルイメージを維持していない）応答のためにこの作業：

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

これはバックグラウンドイメージのために働いています（イメージはクロップ）：

エルス

div { background-size: contain; } 

あなたは自動ウィンドウの高さ/幅を依存するhtml要素のサイズを変更するいくつかのjQueryプラグインに外観を持つことができます。

Answer 3

background-size: containとpadding-bottomのCSSトリックをmaintain aspect ratioに組み合わせる必要があります。これは次のように動作します。主なアイデアはとpadding-bottom: 71.39364303%の.doorwayの要素で、height: 0の組み合わせです。残りの部分は、ポイントを説明するための最小限のスタイリングです。

リンクされたテストページにこれを適用するのは簡単です。

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.textwidget { 
 
    width: 100%: 
 
    font-size: 0; /* to prevent space between inline-block doorways */ 
 
} 
 

 
.one-third { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    box-sizing: border-box; 
 
    width: 30%; 
 
    padding: 20px; 
 
} 
 

 
.doorway { 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    height: 0; 
 
    padding-bottom: 71.39364303%; 
 
    background-image: url('https://placehold.it/409x292'); 
 
    background-size: contain; 
 
    border: 1px solid #000; 
 
    font-size: 1rem; /* reset font-size */ 
 
}

<div class="textwidget"> 
 
    <div class="one-third"> 
 
    <div id="doorway1" class="doorway"> 
 
     <h3>The Best Core Exercise Ever</h3> 
 
     <div class="doorway-action"> 
 
     <a href="#">Watch Video Now</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="one-third"> 
 
    <div id="doorway2" class="doorway"> 
 
     <h3>Core Strength Level 1 Program</h3> 
 
     <div class="doorway-action"> 
 
     <a href="#">Watch Video Now</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="one-third"> 
 
    <div id="doorway3" class="doorway"> 
 
     <h3>Cardio Program</h3> 
 
     <div class="doorway-action"> 
 
     <a href="#">Watch Video Now</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

私はあなたがイメージが応答縮小させるためにimg {max-width:100%}を使用することができると信じています。それから、divを縮小するために、なぜ必要なのかわかりません。 divタグは独自の目的を果たすものではなく、内部に入れるコンテンツのためにのみ重要です。画像のサイズにかかわらず、リンクは画像のサイズのままです。これは、リンクが画像で表されるためです。

しかし、あなたは

.doorway h3{ //h3 is a child element of the class doorway 
    display: block;//Or "inline-block", if you are using inline currently 
    //Then you should be able to set the max-width or max-height whatever the case may be 
    max-height: xx%; 
} 

あなたが使用してWERパーセント値を使用している理由を使用してディメンションを設定できるようにする必要があり、ブロック要素としてなど、あなたが操作する必要があるコンテンツ、H3を、表示された場合height: 71%とは、height: 71% of widthを意味するものではありません。実際には、height: 71% of the viewportまたはデバイスの画面/ウィンドウのサイズ（ビューポートの設定方法によって異なります）を意味するので、コンテンツの取得に使用するビューポートの量は3です画面全体を占める割合が33.33％で、ピクセルのような異なる単位を使うことができます。これは、RWD（レスポンシブウェブデザイン）を使用することができますが、幅に「最大」と「最小」を使用するだけでなく、使用可能な場所でパーセンテージを使用するなど、他の調整も行います。

私が本当にこれが助けてくれたり、少なくともあなたが探している回答に向いていることを願っています。