如何将图像置于菱形div内？ - CSS，HTML

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>