英文:
Embed a thumbnail img inside li to fit list element height
问题
我试图让图像在列表元素内右对齐，如下所示：
这些图像是正方形的（高度和宽度相等），我希望它们适应列表元素的高度并位于右侧。
我目前的HTML代码相当简单（以下是一个示例）：
<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>
如何以最佳方式实现这个效果呢？
英文:
I'm trying to get images to align right within list elements as follows:
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?
答案1
得分: 0
可能的一个答案，也许不适合您的情况，是在每个li上使用一个网格。
第二列的宽度将定义图像的宽度。
图像位于一个div中，这个div是以网格方式居中对齐并水平居中对齐的。现在图像可以具有相对于某物的100%大小。
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>
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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%;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
要实现这个效果，你需要使用<tr>和<td>。以下是如何做到这一点的示例：
<!DOCTYPE html>
<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>
你可以使用一个表格，并设置了一个有两列的行。第二列是图片，我使用了background-image来使图片适应列的大小。我还使用了background-position和background-size来居中并包含图片，这样无论图片的大小如何，都会正确显示。
英文:
To achieve that, you need to use <tr> and <td>. This is a example of how to do that:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论