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; }

HTML CSS适合固定尺寸

2 个答案: