Question

我有一个菱形div，其中包含图片和文字/标题。

.wrap {
  display: inline-block;
  overflow: hidden;
  width: 150px;
  height: 150px;
  margin: 25px;
  transform: rotate(45deg);
}

.wrap img {
  display: block;
  transform: rotate(-45deg);
  transform-origin: left center;
}

.travel-title {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="wrap">
  <img src="https://farm3.staticflickr.com/2178/3531465579_8bff044e9b_z.jpg?zz=1" />
  <div class="travel-title">Tittle</div>
</div>

我想实现三件事：

1）如何在菱形div内居中放置图像？这是因为客户必须在CMS中更改图像。

2）如何在菱形div中居中放置文本/标题？也必须由客户更改。

我试图用这段代码来实现它，但是没有成功：

.travel-title {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3）可以缩小一点图像吗？

使用JS解决方案，JQuery也可以使用。

任何建议都值得赞赏。

更新-解决方案图像

我在注释中处理了数学计算，对于我来说，这是使图片适合菱形的方法，尽管它们的大小不同。

.wrap img {
    display: block;
    transform: rotate(-45deg);
    transform-origin: left center;
    height: 300px;
    margin-top: 40px;
    width: calc(170% - 8.28px);
    height: calc(150% - 8.28px);
    flex-shrink: 0;
  }

Answer 1

1）如何在菱形div内居中放置图像？这是因为客户必须在CMS中更改图像。

您已经使用transform-origin进行了此操作：您是否希望以这种方式居中？

2）如何在菱形div中居中放置文本/标题？也必须由客户更改。

请参阅下面的CSS，以查看我对CSS类所做的更改。

3）可以缩小一点图像吗？

我通过更改图像的高度来缩小图像。我在图像顶部添加了一些边距，以使图像垂直居中。在自定义div中将图像垂直和水平居中的问题不在于您的一位客户要上传的图像大小。我不知道您使用的是什么CMS，但是如果有一种方法可以通过代码裁剪图像或提示用户上传具有特定尺寸的图片，则可以更轻松地设计网站的这一元素。

请告诉我这是否对您有帮助。如果您需要其他帮助，请告诉我。

.wrap {
  display: inline-block;
  overflow: hidden;
  width: 150px;
  height: 150px;
  margin: 25px;
  transform: rotate(45deg);
}

.wrap img {
  display: block;
  transform: rotate(-45deg);
  transform-origin: left center;
  height: 300px;
  margin-top: 15px;
}

.title-wrap {
  width: 100%;
  text-align: center;
}

.travel-title {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  color: red;
  font-weight: bold;
  font-size: 30px;
  transform: rotate(-45deg);
}

<div class="wrap">
  <img src="https://farm3.staticflickr.com/2178/3531465579_8bff044e9b_z.jpg?zz=1" />
  <div class="title-wrap">
    <div class="travel-title">Title</div>
  </div>
</div>

如何在菱形div中将图像居中？ -CSS，HTML

1 个答案: