col-xsに収まるようにサイズを変更する画像

Question

私はこれらのパラメータ内でwinに合うようにイメージのサイズを変更しようとしていますが、img-responsiveを使用すると小さすぎますか？私はそれを固定サイズにするか、可能であれば画面の解像度に合わせるだけでいいですか？

<div class="container-fluid f2p-nav hidden-sm hidden-md hidden-lg"> 
<div class="row"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"><img class="image-container-center img-responsive" src="images/f2p6.png" alt="Chania"></div> 
    <div class="col-xs-4"></div> 
</div> 
</div> 

とCSSは次のとおりです。

.image-container-center { 
    margin-top:27px; 
    display: flex; 
    justify-content: center; 
} 

Fiddle

Answer 1

私はあなたがちょうど使用する必要がある、ブートストラップ内の特定の列に適合するために、画像のサイズを変更する必要はありませんだと思います幅、高さ、最大幅または最小幅などの画像サイズを設定する単位の割合。以下のコードがあります。これがあなたに役立つことを願っています。

<div class="col-xs-4"><img class="image-container-center img-responsive" src="images/f2p6.png" alt="Chania" style="width: 100%; height: 100%"></div>