動的に挿入されたimg要素のCSSの全高さ

私はスライダを作成できるプラグインを使用しています。アップロードした画像は、フロントページのレイアウトに<img>タグとして動的に挿入されます。私はCSSを使って完全な高さでイメージをレンダリングする方法を知っていますが、これをhtmlイメージ要素で動作させることはできません。動的に挿入されたimg要素のCSSの全高さ

このコードは、イメージがCSSによって提供され、その結果が完璧な場合に効果的です。

HTML

.container{ 
 
    width: 750px; 
 
    height: 600px; 
 
    background: rgba(222,211,210,1); 
 
    border: solid 4px #8c8c8c; 
 
} 
 

 
.slider{ 
 
    background-image: url('https://i.imgur.com/Ye4Uugc.jpg'); 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: auto 100%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
}

<div class="container"> 
 
    <div class="slider"> 
 
    </div> 
 
</div>

しかし、画像はこのようにHTML内にあるとき私が持っている問題があります。私はプラグインが画像タグを動的に挿入するので、私はHTMLコードに憂慮することはできませんし、私はプラグインによって挿入された500以上の画像を持っています。上記コードの

HTML

.container{ 
 
    width: 750px; 
 
    height: 600px; 
 
    background: rgba(222,211,210,1); 
 
    border: solid 4px #8c8c8c; 
 
} 
 

 
.slider{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: auto 100%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
}

<div class="container"> 
 
    <div class="slider"> 
 
     <img src="https://i.imgur.com/Ye4Uugc.jpg"> 
 
    </div> 
 
</div>

結果はこれです。明らかにoverflow: hidden;クリップの下部がコンテナの高さを超えていますが、元の比率を保持したままコンテナ内に収まるようにイメージが必要なので、私が望む解決策ではありません。

すべてのヘルプは高く評価されます。

出典

2017-11-07 wibwaj

最初のものは、バックグラウンドであり、もう一つは、IMGはとても（[方法-DO-I-自動サイズ変更・画像を見ています-to-fit-a-div-container]（https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container）を参照してください）。。 –

は、オーバーフローを防ぐためにも、画像にルールを追加します。

.container{ 
 
    width: 750px; 
 
    height: 600px; 
 
    background: rgba(222,211,210,1); 
 
    border: solid 4px #8c8c8c; 
 
} 
 

 
.slider{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: auto 100%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
} 
 

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

<div class="container"> 
 
    <div class="slider"> 
 
     <img src="https://i.imgur.com/Ye4Uugc.jpg"> 
 
    </div> 
 
</div>

出典

2017-11-07 00:47:59

私は@Ali Sheikhpourからリメイクコードです。追加：幅：100％; .slider IMG に

.container{ 
 
    width: 750px; 
 
    height: 600px; 
 
    background: rgba(222,211,210,1); 
 
    border: solid 4px #8c8c8c; 
 
} 
 

 
.slider{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: auto 100%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
} 
 

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

<div class="container"> 
 
    <div class="slider"> 
 
     <img src="https://i.imgur.com/Ye4Uugc.jpg"> 
 
    </div> 
 
</div>

出典

2017-11-07 00:52:30 Ananda

動的に挿入されたimg要素のCSSの全高さ

答えて

関連する問題