Question

我有以下缩略图代码，我为我的图像缩略图构建了这些代码。

这个想法是.dummy将区域填充成正方形，.image是此正方形尺寸的画布。 .image是父Flex容器，.hug是flex子容器。 .hug可以“拥抱”图像，因此我可以将.shadow类应用于图像的大小。

问题是，容器都能正常工作，但图像不会保持包含在垂直和水平成比例居中的容器中。

.thumbnail-item {
  position: relative;
  border-top: 1px solid #EEE;
  padding-top: 50px;
  height: 250px;
  width: 250px;
}

.thumbnail-item .dummy {
  padding-bottom: 100%;
}

.thumbnail-item .image {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.thumbnail-item .image .hug {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.thumbnail-item .image .hug img {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
}

.shadow {
  position: relative;
  &:before,
  &:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-3deg);
  }
  &:after {
    transform: rotate(3deg);
    right: 10px;
    left: auto;
  }
}

<div class="thumbnail-item">
  <div class="dummy"></div>
  <div class="image">
    <div class="hug shadow">
      <img src="https://news.dphotographer.co.uk/wp-content/uploads/2013/10/RS35514_Lead-Image-new.jpg" />
    </div>
  </div>
</div>

任何人都可以帮助我理解为什么图像不在其容器内？以及如何修改我的代码呢？

Answer 1

请将此css提供给img代码

.thumbnail-item .image .hug img {height: auto;max-height: 100%;max-width: 100%;width: auto;}

Answer 2

您的图片不尊重父母尺寸，因为您的父母（.hug）没有实际尺寸。 max-height和max-width会限制元素的大小，但不会设置此元素的大小。因此，您需要通过添加.hug

来设置width: 100%; height: 100%的大小

.thumbnail-item {
  position: relative;
  border-top: 1px solid #EEE;
  padding-top: 50px;
  height: 250px;
  width: 250px;
}

.thumbnail-item .dummy {
  padding-bottom: 100%;
}

.thumbnail-item .image {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.thumbnail-item .image .hug {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  text-align: center;
}

.thumbnail-item .image .hug img {
  max-height: 100%;
  max-width: 100%;
  box-shadow: 8px 8px #123;
}

.shadow {
  position: relative;
  &:before,
  &:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-3deg);
  }
  &:after {
    transform: rotate(3deg);
    right: 10px;
    left: auto;
  }
}

<div class="thumbnail-item">
  <div class="dummy"></div>
  <div class="image">
    <div class="hug shadow">
      <img src="https://news.dphotographer.co.uk/wp-content/uploads/2013/10/RS35514_Lead-Image-new.jpg" />
    </div>
  </div>
</div>

Answer 3

这对你有用。

<强>更新

我更改了一些代码 -

.thumbnail-item {
  position: relative;
  border-top: 1px solid #EEE;
  padding-top: 50px;
  height: 250px;
  width: 250px;
  left: 50%;
  transform: translate(-50%);
}

.thumbnail-item .image .hug {
  margin: auto;
  width: 100%;
  height: 100%;
  display: inline-block;
}

.thumbnail-item .image .hug img {
  max-height: 100%;
  width: 100%;
}

＆＃13;

.thumbnail-item {
  position: relative;
  border-top: 1px solid #EEE;
  padding-top: 50px;
  height: 250px;
  width: 250px;
  left: 50%;
  transform: translate(-50%);
}

.thumbnail-item .dummy {
  padding-bottom: 100%;
}

.thumbnail-item .image {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.thumbnail-item .image .hug {
  margin: auto;
  width: 100%;
  height: 100%;
  display: inline-block;
  position:relative;
  left:50%;
  transform:translate(-50%)
}

.thumbnail-item .image .hug img {
  max-height: 100%;
  width: 100%;
}

.shadow {
  position: relative;
  &:before,
  &:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-3deg);
  }
  &:after {
    transform: rotate(3deg);
    right: 10px;
    left: auto;
  }
}

＆＃13;

<div class="thumbnail-item">
  <div class="dummy"></div>
  <div class="image">
    <div class="hug shadow">
      <img src="https://news.dphotographer.co.uk/wp-content/uploads/2013/10/RS35514_Lead-Image-new.jpg" />
    </div>
  </div>
</div>

＆＃13;

检查它是否对您有所帮助。：）

Answer 4

您可以使用object-fit CSS属性，该属性将指定您的内容（图像）如何通过使用高度和宽度设置为最大值来设置框。

.thumbnail-item {
  object-fit: cover;
  overflow: hidden;
  position: relative;
  border-top: 1px solid #EEE;
  padding-top: 50px;
  max-height: 250px;
  max-width: 250px;
  left: 50%;
  transform: translate(-50%);
}

.thumbnail-item .dummy {
  padding-bottom: 100%;
}

.thumbnail-item .image {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.thumbnail-item .image .hug {
  margin: auto;
  width: 100%;
  height: 100%;
  display: inline-block;
  position:relative;
  left:50%;
  transform:translate(-50%)
}

.thumbnail-item .image .hug img {
  max-height: 100%;
  width: 100%;
}

.shadow {
  position: relative;
  &:before,
  &:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-3deg);
  }
  &:after {
    transform: rotate(3deg);
    right: 10px;
    left: auto;
  }
}

<div class="thumbnail-item">
  <div class="dummy"></div>
  <div class="image">
    <div class="hug shadow">
      <img src="https://news.dphotographer.co.uk/wp-content/uploads/2013/10/RS35514_Lead-Image-new.jpg" />
    </div>
  </div>
</div>

希望这能解决你的问题！

Flex - 图像约束

4 个答案: