css - Card block, how to position and size image

Question

I'm having problems finding the best way to position and size the image in the example here.

I want the image to be positioned on the far right and be resized so it fits inside the containing block.

Is position the best way to position and how can I resize it to fit within the block. I want the image proportional scaled to fit

*{
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.block{
  border: 1px solid grey;
  margin: 10px;
  position: relative;
}

.block__body{
  padding: 10px ;
}

.block__img{
  position: absolute;
  right: 0;
  top: 0;
}

<div class="block">

    <div class="block__body">
        <div>
            <h3 class="block__heading">
                Heading Text
            </h3>
            <p class="block__copy">Copy Text</p>
        </div>
    </div>
    <div class="block__img">
        <img
            src="https://placeimg.com/640/480/animals"
            alt="placeholder image"
        />
    </div>
</div>

Note: the `` tag does not use and does not need a closing slash and never has in HTML. — Rob, Mar 24 '20 at 14:05

score 1 · Answer 1 · answered Mar 24 '20 at 13:30

You need to limit the height of the div and image, otherwise it will be shown in the original image size.

* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.block {
  border: 1px solid grey;
  margin: 10px;
  position: relative;
}

.block__body {
  padding: 10px ;
}

.block__img {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

For the <img>, you can put it inline:

<img
  src="https://placeimg.com/640/480/animals"
  alt="placeholder image"
  height="100%"
/>

Or in the CSS:

.block__img img {
  height: 100%;
}

teddcp · Accepted Answer · 2020-03-24T14:09:46.393

Please check my code . With the flex property, you can put them in one row. To scale the image with respect to the screen size and for better responsiveness, you can add the vw and vh to that.

And you don't need the position property for this when you have the flex property.

* {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
      }

      .block {
        border: 1px solid grey;
        margin: 10px;
        height: 35vh;

        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
      }

      .block__body {
        padding: 10px;
        text-align: center;
        vertical-align: baseline;
      }

      .block__img img {
        width: 40vw;
        /*height: 30vh;*/
        height: 100%;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

  </head>
  <body>
    <div class="block">
      <div class="block__body">
        <h3 class="block__heading">
          Heading Text
        </h3>
        <p class="block__copy">Copy Text</p>
      </div>
      <div class="block__img">
        <img
          src="https://images.unsplash.com/photo-1502899845910-573a1d1c390d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9"
          alt="placeholder image"
        />
      </div>
    </div>
  </body>
</html>

css - Card block, how to position and size image

2 Answers2