旋转的方块作为图像

Question

我是HTML，CSS的新手。我还在学习，请理解。

我正在尝试做一些看起来像这样的艺术画廊：

https://graphexplorerbeta.azurewebsites.net/src/api-explorer-helpers.js:81

我在教程的帮助下创建了这个方块，但我想升级它并放置一个图像而不是正方形，但我不知道如何做到这一点。有什么提示吗？

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #99CCFF;
}
.container {
  max-width: 1070px;
  padding: 0 30px;
  margin: 0 auto;
}
.diamond {
  width: 11.5%;
  padding-bottom: 11.5%;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
}
.diamond-big {
  width: 25%;
  padding-bottom: 25%;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
}
.grid {
  position: relative;
  padding-bottom: 100%;
  transform: rotate(45deg);
  transform-origin: 39%;
}
.grid-section {
  overflow: hidden;
  padding-bottom: 200px;
}
#diamond1 {
  position: absolute;
  top: 25%;
  left: 10.5%;
  cursor: pointer;
}
#diamond2 {
  position: absolute;
  top: 25%;
  left: 24%;
}
#diamond3 {
  position: absolute;
  top: 11.5%;
  left: 37.5%;
}
#diamond4 {
  position: absolute;
  top: 38.5%;
  left: 24%;
}
#diamond5 {
  position: absolute;
  top: 38.5%;
  left: 51%;
}
#diamond6 {
  position: absolute;
  top: 52%;
  left: 51%;
}
#diamond7 {
  position: absolute;
  top: 38.5%;
  left: 64.5%;
}
#diamond8 {
  position: absolute;
  top: 65.5%;
  left: 51%;
}
#diamond9 {
  position: absolute;
  top: 65.5%;
  left: 64.5%;
}

<div class="container">
  <section class="grid-section">
    <div class="grid">
      <div id="diamond1" class="diamond"></div>
      <div id="diamond2" class="diamond"></div>
      <div id="diamond3" class="diamond-big"></div>
      <div id="diamond4" class="diamond-big"></div>
      <div id="diamond5" class="diamond"></div>
      <div id="diamond6" class="diamond"></div>
      <div id="diamond7" class="diamond-big"></div>
      <div id="diamond8" class="diamond"></div>
      <div id="diamond9" class="diamond-big"></div>
    </div>
  </section>
</div>

Answer 1

如果你想让图像易于下载或者不想在css中使用背景图像，你可以做这样的事情。我在div中添加了图像并添加了以下css：

.diamond {
  width: 11.5%;
  padding-bottom: 11.5%;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
  position:relative;
  overflow:hidden;
 }

 .diamond img, .diamond-big img 
 { position:absolute;
   left:-25%;
  top:-25%;
   width:150%;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  transform: rotate(-45deg);
 }

.diamond-big {
  width: 25%;
  padding-bottom: 25%;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
  position:relative;
  overflow:hidden;
  }

这使得图像与正方形一样大。

完整的代码段：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #99CCFF;
}
.container {
  max-width: 1070px;
  padding: 0 30px;
  margin: 0 auto;
}
.diamond {
  width: 11.5%;
  padding-bottom: 11.5%;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
  position:relative;
  overflow:hidden;
 }

.diamond img, .diamond-big img 
{ position:absolute;
  left:-25%;
 top:-25%;
  width:150%;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}

.diamond-big {
  width: 25%;
  padding-bottom: 25%;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
  position:relative;
  overflow:hidden;
}
.grid {
  position: relative;
  padding-bottom: 100%;
  transform: rotate(45deg);
  transform-origin: 39%;
}
.grid-section {
  overflow: hidden;
  padding-bottom: 200px;
}
#diamond1 {
  position: absolute;
  top: 25%;
  left: 10.5%;
  cursor: pointer;
}
#diamond2 {
  position: absolute;
  top: 25%;
  left: 24%;
}
#diamond3 {
  position: absolute;
  top: 11.5%;
  left: 37.5%;
}
#diamond4 {
  position: absolute;
  top: 38.5%;
  left: 24%;
}
#diamond5 {
  position: absolute;
  top: 38.5%;
  left: 51%;
}
#diamond6 {
  position: absolute;
  top: 52%;
  left: 51%;
}
#diamond7 {
  position: absolute;
  top: 38.5%;
  left: 64.5%;
}
#diamond8 {
  position: absolute;
  top: 65.5%;
  left: 51%;
}
#diamond9 {
  position: absolute;
  top: 65.5%;
  left: 64.5%;
}

<div class="container">
  <section class="grid-section">
    <div class="grid">
      <div id="diamond1" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond2" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond3" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond4" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond5" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond6" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond7" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond8" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond9" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>

    </div>
  </section>
</div>

Answer 2

尝试将属性background-image添加到菱形和 diamond-big 类。例如：

.diamond {
    width: 11.5%;
    padding-bottom: 11.5%;
    background-image: url("image.jpg");
    background-color: rgba(255, 255, 255, 0.3);
    display: inline-block;
}

如果您还没有看到图片，请尝试添加高度属性。

Answer 3

有很多方法可以做到这一点

其中一个最快是将var SpecialChildView = App.BaseView.extend({ initialize: function(options) { // Cancel the base class wrapping by putting // the this class's prototype render back. this.render = SpecialChildView.prototype.render; // specific initialization }, render: function() { // new rendering } }); 代码与<div>标记交换，同时保留<img>和{{ 1}}属性

在你的情况下，你需要调整一些CSS以避免不必要的填充

这是一个工作示例:(需要抛光）

＆＃13;

＆＃13;

class

＆＃13;

id

＆＃13;

＆＃13;

＆＃13;

Answer 4

我看到它的方式，你有两个选择：

选项1：HTML和CSS（最大宽度） 你只需在你的div中插入img并将max-width设置为100％，如：

<div id="diamond2" class="diamond">
<img style="max-width: 100%" src="yourpicture.jpg">
</div>

如果这样做，你必须确保将div设置为图片的正确尺寸（或至少比例），并使用max-width属性。

选项2：使用CSS 在CSS上将它们设置为背景，并使用正确类型的背景大小（封面或包含）：

    #diamond6 {
           background-image: url('yourpicture.jpg'); 
           background-size: cover;
           position: absolute;
           top: 52%; 
           left: 51%;
          }

我希望它有所帮助！

Answer 5

使用背景图像的背景图像

  background-image: url('http://placehold.it/100');
  background-size: 100% 100%;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #99CCFF;
}
.container {
  max-width: 1070px;
  padding: 0 30px;
  margin: 0 auto;
}
.diamond {
  width: 11.5%;
  padding-bottom: 11.5%;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
  background-image: url('http://placehold.it/100');
  background-size: 100% 100%;
}
.diamond-big {
  width: 25%;
  padding-bottom: 25%;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
}
.grid {
  position: relative;
  padding-bottom: 100%;
  transform: rotate(45deg);
  transform-origin: 39%;
}
.grid-section {
  overflow: hidden;
  padding-bottom: 200px;
}
#diamond1 {
  position: absolute;
  top: 25%;
  left: 10.5%;
  cursor: pointer;
}
#diamond2 {
  position: absolute;
  top: 25%;
  left: 24%;
}
#diamond3 {
  position: absolute;
  top: 11.5%;
  left: 37.5%;
}
#diamond4 {
  position: absolute;
  top: 38.5%;
  left: 24%;
}
#diamond5 {
  position: absolute;
  top: 38.5%;
  left: 51%;
}
#diamond6 {
  position: absolute;
  top: 52%;
  left: 51%;
}
#diamond7 {
  position: absolute;
  top: 38.5%;
  left: 64.5%;
}
#diamond8 {
  position: absolute;
  top: 65.5%;
  left: 51%;
}
#diamond9 {
  position: absolute;
  top: 65.5%;
  left: 64.5%;
}

<div class="container">
  <section class="grid-section">
    <div class="grid">
      <div id="diamond1" class="diamond"></div>
      <div id="diamond2" class="diamond"></div>
      <div id="diamond3" class="diamond-big"></div>
      <div id="diamond4" class="diamond-big"></div>
      <div id="diamond5" class="diamond"></div>
      <div id="diamond6" class="diamond"></div>
      <div id="diamond7" class="diamond-big"></div>
      <div id="diamond8" class="diamond"></div>
      <div id="diamond9" class="diamond-big"></div>
    </div>
  </section>
</div>