フレックスボックスにクロップされたスケーラブルなイメージコンテナを作成する方法は？

私は3列のフレックスボックスレイアウトを自分のウェブサイトに作成しようとしていますが、その上に3つのイメージがあり、次に3つのテキストがあります。私は、コンテナの大きさが大きすぎる場合、画像を切り抜く固定アスペクト比のコンテナにする必要があります。画像はコンテナ全体を高さ方向に塗りつぶす必要があります。ウィンドウがダウンサイズである場合フレックスボックスにクロップされたスケーラブルなイメージコンテナを作成する方法は？

は、画像ではなく、今それだけで幅をスケーリングし、フレキシボックスでアスペクト比を維持したスケールダウンする必要があります。

私の問題は関係なく、私が研究し何の解決策ではありません、私はできませんでした固定アスペクト比のクロップされたイメージを与え、その比率を維持するようにスケーリングするイメージを見つけます。これは、常に拡大縮小する画像全体、または幅を拡大縮小してさらに画像を切り抜くかのどちらかです。

解決方法はありますか？

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    text-wrap: normal; 
 
    text-align: center; 
 
    position: relative; 
 
    padding-bottom: 5.5em; 
 
    margin: 0; 
 
    min-height: 100%; 
 
} 
 

 
.homeinfo-flex { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    float: left; 
 
    width: 100%; 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    display: flex; 
 
    max-width: 67em; 
 
    justify-content: space-around; 
 
    background: #CCC; 
 
} 
 

 
.homeinfo-flex .col { 
 
    width: 30%; 
 
    margin: 0 1%; 
 
    text-align: left; 
 
} 
 

 
.homeinfo-flex .container { 
 
    text-align: center; 
 
    overflow: hidden; 
 
    padding-bottom: 2em; 
 
} 
 

 
.homeinfo-flex img { 
 
    position: relative; 
 
    left: 100%; 
 
    margin-left: -200%; 
 
    height: 15.62em; 
 
    max-width: 15.62em; 
 
}

<body> 
 
    <div class="homeinfo-flex"> 
 
    <div class="col"> 
 
     <div class="container"><img src="images/street_ph.jpg" alt="Street" /></div> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
     sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
 
     rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
    <div class="col"> 
 
     <div class="container"><img src="images/resturaunt_ph.jpg" alt="Street" /></div> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
     sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
 
     rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
    <div class="col"> 
 
     <div class="container"><img src="images/event_ph.jpg" alt="Street" /></div> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
     sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
 
     rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-12-07 Neo Conker

オプション1：背景画像として画像を添付。 div class = "container" style = "background-image：url（images/resturaunt_ph.jpg）;"

.container { 
    background-image: url() 
    background-size:cover; 
    padding-bottom: 80%; // 5:4 ratio 
}

オプション2：アスペクト比でコンテナをパディングし、画像をオブジェクトフィット：coverに設定します。

.container { 
    position:relative; 
    padding-bottom: 80%; // 5:4 ratio 
} 
.container img { 
    position:absolute; 
    top:0; 
    left:0; 
    min-height: 100%; 
    min-width:100%; 
    object-fit: cover // check browser support 
}

出典

2017-12-07 05:53:29

ありがとうございました！ –

フレックスボックスにクロップされたスケーラブルなイメージコンテナを作成する方法は？

答えて

関連する問題