我正在构建一个网站并遇到了这个问题:我有一张 345x300 的图像。
在我的 div 中,她得到 82 x 118 的宽度,保持这样:
我需要图像的宽度为 82 x 82,当我设置它时它会变平。
我该怎么做才能解决这个问题?抱歉我的英语不好。
如果需要,这是我正在工作的网站:https://2018.escambofotografico.com.br/ (我在页面末尾谈论的问题)
谢谢大家!
最佳答案
您也可以使用 object-fit css 属性来做到这一点。 我为您举了一个小例子来说明它是如何工作的。
$(function(){
$('.list-group button').click(function(e) {
e.preventDefault()
$that = $(this);
$that.parent().find('button').removeClass('active');
$that.addClass('active');
$("img").removeClass();
$("img").addClass($that.prop('id'));
});
})
img {
height: 182px;
width: 182px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action" id="fill">object-fit: fill;</button>
<button type="button" class="list-group-item list-group-item-action" id="cover">object-fit: cover;</button>
<button type="button" class="list-group-item list-group-item-action" id="contain">object-fit: contain;</button>
<button type="button" class="list-group-item list-group-item-action" id="none">object-fit: none;</button>
<button type="button" class="list-group-item list-group-item-action" id="scale-down">object-fit: scale-down;</button>
</div>
</div>
<div class="col-6">
<img src="http://coveractionspremium.com/images/SoftwareBoxCD-model6v2-coveractions1.jpg" alt="">
</div>
</div>
</div>
这是一个你可以玩的代码笔: https://codepen.io/gurgen/pen/jKmXXW
关于html - 如何保持缩小图像的纵横比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50824314/