固定大小的 HTML CSS Fit 圖像

Question

我知道這個話題已經出現了幾次，但這些問題的答案都沒有解決我的問題。 這就是為什么我在這里問它。 我有一個網站，我有一張標准的 Bootstrap 卡，上面有一個圖像，但它看起來像這樣

我怎樣才能使圖像自動適應中間並且看起來不會被拉長？

這是我的 HTML 代碼（沒有附加 CSS，它的標准引導程序）

<div class="row mt-4">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-image">
                        <img class="card-img-top" src="images/example.png">
                    </div>

                    <div class="card-header">
                        <h6 class="m-0">Some text</h6>
                    </div>
                    <div class="card-body" style="height: 130px">

                        <p class="m-0">Some text</p>

                    </div>
                    <div class="card-footer">

                        Footer
                    </div>
                </div>
            </div>
</div>

Answer 1

最好的辦法是將圖像用作背景並結合背景封面。 這將允許照片增長和調整大小而不會看起來不穩定。

 .card-header { height:200px; background-image:url('http://www.fillmurray.com/g/500/200'); background-size:cover; background-position:center center; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row mt-4"> <div class="col-md-4"> <div class="card mb-4"> <div class="card-image"> <img class="card-img-top sr-only" src="images/example.png"> </div> <div class="card-header"> <h6 class="m-0">Some text</h6> </div> <div class="card-body" style="height: 130px"> <p class="m-0">Some text</p> </div> <div class="card-footer"> Footer </div> </div> </div> </div>

Answer 2

將此添加到您的“img”樣式中：

img { height: 200px;width:100%;object-fit: cover; }