时间戳

首页 > 解决方案 > Bootstrap 4 - 轮播自动放大图像的一部分以使其适合有没有办法改变它？

html - Bootstrap 4 - 轮播自动放大图像的一部分以使其适合有没有办法改变它？

问题描述

它放大到图像中的一个区域，是否可以更改放大到的位置？

是的，我知道拥有正确的分辨率会更好，但我不知道轮播的最佳分辨率。

这是小提琴的链接，所以你可以看到。 https://jsfiddle.net/rmbeo4oh/

<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src="wpimages/received_10214620274008052.jpeg" alt="First slide">
    </div>
</div>

标签： htmlcssbootstrap-4

解决方案

最好的解决方案是使用 Photoshop 之类的工具根据您的需要剪切资源，但如果这不是一个选项，您可以使用 CSS 转换。

我假设您只是对调整垂直对齐方式感兴趣，因为轮播中的图像设置为 100% 宽度。要么创建一些帮助类（即.pull-20），要么向图像添加描述性类名称（即.security-camera）并相应地调整：

<img class="d-block w-100 security-camera" src="wpimages/received_10214620274008052.jpeg" alt="First slide">

.security-camera {
    transform: translateY(-20%);
}

https://jsfiddle.net/rmbeo4oh/1/

推荐阅读