时间戳

首页 > 解决方案 > 轮播和固定图像大小

html - 轮播和固定图像大小

问题描述

我是引导程序和 CSS 的新手，尤其是像 carousel 这样的东西到目前为止这是我的代码

                <div class="container">
                    <div class="row">
                        <div class="carousel-item <%# Eval("Aclass") %>">
                            <img class='img-fluid w-100' alt="slide Responsive image" src='<%# Eval("ImageValue") %>' />
                        <div/>
                    </div>
                </div>

显示图像效果很好，但是当图像大小不同时就会出现问题。

有时我必须上下滚动才能滚动完整图像，无论原始图像大小是多少，我如何强制它说 500 x 500 像素的图像。

标签： htmlcssasp.netbootstrap-4

解决方案

我有一个解决方案可以帮助你解决这个问题，但是在应用这个解决方案之后，如果你没问题，你的一些图像部分会被剪切，然后将你的图像绑定到一个 div 中。

就像片段中的这个例子：

.image_container {
  width: 100%;
  padding-top: 40%; /*height of the image depands on this*/
  overflow: hidden;
  position: relative;
}

.image_container img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
}
<div class="image_container">
  <img src="https://i.pinimg.com/originals/1f/87/90/1f8790df8b450fbf5c3b4a6b9db4f822.jpg" alt="image">
</div>

此解决方案显示图像的中心部分并始终填充容器并剪切图像的某些部分。

注意：请为此添加一个额外的 div 类，不要将carousel-item类视为图像容器。

推荐阅读