CSSを使用した縮尺の背景画像

Question

私はStartbootstrap.comのModern Business Templateを使用しています。ホームページにはカルーセルがあります。 CSS属性を使用して背景画像を設定すると、background-size: cover;画像は伸びますが、縮尺は変わりません。カルーセルパネル全体を覆うように画像を伸ばし、適切に拡大するにはどうすればよいですか？

HTML：

<div class="item"> 
    <div class="fill" style="background-image:url('Content/img/myimage.jpg');"></div> 

はCSS：background-fit: coverの代わりに

header.carousel .fill { 
    width: 100%; 
    height: 100%; 
    background-size:  cover;      
    background-repeat: no-repeat; 
    background-position: center center; 
} 

Answer 1

、私が何を探していることはobject-fit: coverであると考えています。 background-fit: coverのように、object-fit: coverは、画像が親の全幅をカバーすることを可能にするが、画像を拡大縮小しないので、画像のアスペクト比を維持することができる。

header.carousel .fill { 
    width: 100%; 
    height: 100%;     
    background-repeat: no-repeat; 
    background-position: center center; 
    object-fit: cover; 
} 

これが役に立ちます。 :)