Html - Adding a box around the heart image

user28597874
December 3, 2024
130 views
0 votes
2 Answers

Is thee anyone able to help with this?

All I want to do is place the heart image into a box.

I’m trying to do this: Image

I am looking to create a 400 x 400 pixel box around the heart image that I have provided. My goal is to ensure that the heart is neatly enclosed within this box, which should be clearly visible in the final composition.

How do I do that in the code?

body {
  margin: 80px;
}
.left,
.right {
  display: inline-block;
}
.left {
  width: 170px;
  height: 239px;
  margin-right: -4px;
}

div > div {
  display: block;
  height: 34px;
}
div > div > div {
  width: 30px;
  height: 30px;
  background-color: red;
  display: inline-block;
  float: right;
  margin: 2px;
}
div.right > div > div {
  float: left;
}

<div class="left">
  <div style="padding-right: 68px">
    <div></div>
    <div></div>
  </div>
  <div style="padding-right: 34px">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>
<div class="right">
  <div style="padding-left: 34px">
    <div></div>
    <div></div>
  </div>
  <div style="">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>

Tags: css html

Answers

If you wrap everything in another element, then you can set it’s size to 400×400 and center it’s contents.

I used <main> but you could just as well use a <div>

/* EDIT Added the Box  */
.Box {
  box-sizing: border-box;
  width: 400px;
  height: 400px;
  background-color: black;
  text-align: center;
  padding-top: 64px;
}

body {
  margin: 80px;
}

.left,
.right {
  display: inline-block;
}
.left {
  width: 170px;
  height: 239px;
  margin-right: -4px;
}

div > div {
  display: block;
  height: 34px;
}
div > div > div {
  width: 30px;
  height: 30px;
  background-color: red;
  display: inline-block;
  float: right;
  margin: 2px;
}
div.right > div > div {
  float: left;
}

<!-- EDIT Added the Box -->
<main class="Box">
  <div class="left">
    <div style="padding-right: 68px">
      <div></div>
      <div></div>
    </div>
    <div style="padding-right: 34px">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
  </div>
  <div class="right">
    <div style="padding-left: 34px">
      <div></div>
      <div></div>
    </div>
    <div style="">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
  </div>
</main>

I did a similar design previously using a single element:

.heart {
  --s: 30px; /* control the square size */
  
  display: grid;
  place-content: center;
  width: 400px; /* the box size */
  aspect-ratio: 1;
  background: #000;
}
.heart:before {
  content: "";
  width: calc(10*var(--s));
  aspect-ratio: 80/71;
  background: red; /* the heart color */
  mask: conic-gradient(at calc(100% - var(--s)/8) calc(100% - var(--s)/8),#0000 75%,#000 0) 0 0/calc((100% + var(--s)/8)/9) calc((100% + var(--s)/5)/8);
  clip-path: polygon(0 11.1%,11.1% 12.5%,11.1% 0,33.3% 0,33.3% 12.5%,44.4% 12.5%,44.4% 25%,55.5% 25%,55.5% 12.5%,66.6% 12.5%,66.6% 0,88.8% 0,88.8% 12.5%,100% 12.5%,100% 50%,88.8% 50%,88.8% 62.5%,77.7% 62.5%,77.7% 75%,66.6% 75%,66.6% 87.5%,55.5% 87.5%,55.5% 100%,44.4% 100%,44.4% 87.5%,33.3% 87.5%,33.3% 75%,22.2% 75%,22.2% 62.5%,11.1% 62.5%,11.1% 50%,0 50%);
}

<div class="heart"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Adding a box around the heart image

Answers