画像のアスペクト比ズーム中に1つのdivが別のものを引き継ぐ

私は数日前にCSSを学び始めましたが、私は本当に解決する方法がわからない問題があります。画像のアスペクト比ズーム中に1つのdivが別のものを引き継ぐ

すべての画像を同じ状態にしたい（ページをズームしながら元のアスペクト比で）。しかし、私がページをズームしているときに、画像は上の他の画像（背景）を引き継いでいます。私のフッタも欠落しています...

同じ幅（ページの50％）と高さをもたないページの下部に、最初の2行と最後の2行のイメージが必要です通常のアスペクト比で表示されます。

ここでは、私が欲しいと思っているものの実用的な例がありますが、それらのスタイルの多くは地獄であり、何から始めるべきかもわかりません。 https://www.templatemonster.com/demo/61406.html

多分、タグではなく他のタグを使用するほうがよいでしょう。そしてそのようなイメージを背景のようにしますか？しかし、私は、バリエーションの多くを試したし、何も助けてください！:(

PS恩赦私の英語

ここに私のコードだ https://jsfiddle.net/ayhj9vb0/364/

body { 
 
    margin: 0px; 
 
} 
 

 
/* Properties for background image here */ 
 
#wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://citywallpaperhd.com/download/71-huge-impressive-city-at-night.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 

 
#logo { 
 
    padding-top: 30px; 
 
    padding-left: 25px; 
 
    float: left; 
 
} 
 

 

 
#navigation { 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: #000000; 
 
} 
 

 
#navigation ul { 
 
    margin: 0px; 
 
    padding: 30px; 
 
    text-align: center; 
 
    list-style-type: none; 
 
} 
 

 
#navigation li { 
 
    width: 15%; 
 
    font-size: 18px; 
 
    padding: 0px 0px; 
 
    display: inline-block; 
 
    color: #ffffff; 
 
} 
 

 
#navigation a { 
 
    padding: 5px; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
} 
 

 
#navigation a.current { 
 
    color: #000000; 
 
    background-color: #ffffff; 
 
    border-radius: 8px; 
 
} 
 

 
#navigation a:hover { 
 
    color: #ff9900; 
 
} 
 

 

 
#banner-text { 
 
    width: 1200px; 
 
    margin: 250px 50px; 
 
    font-size: 42px; 
 
    color: #ffffff; 
 
} 
 

 
#banner-text p { 
 
    width: 800px; 
 
    font-size: 24px; 
 
    line-height: 24px; 
 
} 
 

 

 
#main-content img, #main-content-2 img{ 
 
    width: 50%; 
 
    max-height: 500px; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 

 
#footer { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: #000000; 
 
}

<body> 
 
    <div id="wrapper"> 
 
     <nav id="navigation"> 
 

 
      <img id="logo" src="img/logo.png"/> 
 

 
      <ul> 
 
       <li><a class="current" href="index.html">Home</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
      </ul> 
 
     </nav> 
 

 
     <div id="banner-text"> 
 
      <h1>h1 text</h1> 
 
      <p> 
 
       text text text text text text text text text text text text text text text text text text 
 
       text text text text text text text text text text text text text text text text text text 
 
      </p> 
 
     </div> 
 
    </div> 
 

 
    <div id="main-content"> 
 
     <img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/> 
 
    </div> 
 
    
 
    <div id="main-content-2"> 
 
    <img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/> 
 
    </div> 
 

 
    <div id="footer"> 
 

 
    </div> 
 

 
    </body>

を変更しません

出典

2017-04-21 PoorProgrammer

次のCSSを削除してください。

#main-content img, #main-content-2 img{ 
    max-height: 500px; /* remove this line */ 
}

参照：https://jsfiddle.net/egdeLy1c/、おかげで働いた

出典

2017-04-21 18:49:17 JoostS

。しかし、私がズームしているときにそれらの画像が上がります。これを防ぐ方法は？ – PoorProgrammer

素晴らしい！この問題が解決したら、新しい質問をしてください。 – JoostS

画像のアスペクト比ズーム中に1つのdivが別のものを引き継ぐ

答えて

関連する問題