Question 204790 in Html Question posted in
Some basic documentation can be found here.

Html – Embed a thumbnail img inside li to fit list element height

I’m trying to get images to align right within list elements as follows:

enter image description here

The images are squares (equal height and width) and I want them to fit within the height of the list element to the right.

My html code is pretty simple at the moment (the following is an example):

<ul>
    <li> 
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Square_-_black_simple.svg">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </li>
</ul>

What would be the best way to do this?

Tags:

2

Answers


  1. 0

    1 possible answer, perhaps not suitable for you is to use a grid on each li.

    the second column width will define the img width.
    the img is in a div, this div is grid align center and justify center too. Now the img can have a size 100% it’s relative to something.

    body {
  margin: 50px;
  padding: 0;
}

ul {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

ul li {
  display: grid;
  grid-template-columns: 1fr 5%;
  grid-template-rows: 1fr;
  gap: 10px;
}

ul li span {
  display: inline-block;
}

ul li div {
  overflow: hidden;
  align-self: center;
  justify-self: center;
  aspect-ratio: 1 / 1;
}

ul li div img {
  width: 100%;
  height: 100%;
}
    <ul>
  <li>
    <span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </span>
    <div>
      <img src="https://picsum.photos/300/300" alt="">
    </div>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    To achieve that, you need to use <tr> and <td>. This is a example of how to do that:

    <html>

<head></head>

<body>
    <table border="1">
        <tbody>
            <tr>
                <td>Your content</td>
                <td class="image"></td>
            </tr>
        </tbody>
    </table>
    <style>
        .image{
          background-image:url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png');
          width:50px;
          height:50px;
          position:relative;
          background-repeat: no-repeat;
          background-size: contain;
          background-position:center center;
        }
    </style>
</body>

</html>

    You can use a table and I set a line with two columns. The second column is the image, and I use background-image so that the image will fit in the column. I also use background-position and background-sizeto center and contain the image, so that no matter what is the size of the image, it will show it properly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search