Question

我正在编辑一个网站原创主题，目前已经遇到了一个在div内垂直裁剪的图像请参阅下面的codepen或示例：https://codepen.io/hioioasd90/pen/LzvmpW

我希望此图像完整显示，但缩放到外部容器设置宽度。编辑chrome控制台后，将height: 27vh;更改为更大的数字将导致图像在div内部显示更多，但是它会超出最大宽度的边界。

＆＃13;

.container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;

}

.img-cover-category {
    background: none no-repeat center center;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 0;
    padding: 0;
    height: 27vh;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: 0px;
}

＆＃13;

<div class="container">
<div class="img-cover-category" style="background-image: url(https://writernikhilpro01.files.wordpress.com/2015/08/unsplash-laptop-desk.jpg);"></div>
  
</div>

＆＃13;

Answer 1

根据您想要实现的目标，首先您可以删除doubled：

background-size: cover; // this is doubled in the css code

并添加：

background-size: contain; // new version for every browser

从这一点开始尝试调整图像的大小。

以下是您可以删除的内容：

.img-cover-category {
    background: none no-repeat center;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 0;
    padding: 0;
    height: 27vh;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: 0px;
}

然后粘贴它：

.img-cover-category {
    background: none no-repeat center;
    -moz-background-size: contain;
    -o-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
    position: relative;
    z-index: 0;
    padding: 0;
    height: 27vh;
    width: 100%;
    margin-bottom: 0px;
}

然后，如果缩放应该将图像固定在顶部而不是居中于中间，则可以更改：

 background: none no-repeat top;

调整新情况A

而不是调整图像的高度设置容器的高度

.container {
    max-width: 1000px;
    height: 1000px;
    margin: 0 auto;
    position: relative;
    border: 1px;
    border-color: #000;
    border-width: 1px;
    border-style: solid;
}

.img-cover-category {
   background: none no-repeat top;
   -moz-background-size: contain;
   -o-background-size: contain;
   -webkit-background-size: contain;
   background-size: contain;
   position: relative;
   z-index: 0;
   padding: 0;
   height: 100%;
   width: 100%; /* Currently this seems to be obsolete */
   margin-bottom: 0px;
}

同时添加 min-height：假设1000px到.img-cover-category 似乎使背景可见...以及...

老实说我不知道这会是一个标题，一个背景 - 也许你可以添加一个普通的图像而不是背景....如果你想让它一直可见......

在div中裁剪的图像。如何保持原有的方面

1 个答案: