gpt4 book ai didi

html - 在不调整大小和溢出的情况下将图像填充到表格单元格中

转载 作者:太空宇宙 更新时间:2023-11-04 15:53:52 24 4
gpt4 key购买 nike

我想在不调整大小但裁剪溢出部分的情况下将图像放入我的表格单元格。现在我只将图像调整为最大或仅按水平裁剪

想要:

得到:

得到:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<style>

.tablemap {
table-layout:fixed;
}

tr {
}

td {

}
.pixelblock {
padding: 1px;
width: 60px;
height: 60px;
max-width: 60px;
max-height: 60px;
background-color: lightgrey;
overflow: hidden;
}

.pixelblockimage {
min-width: 100%;
min-height: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

</style>
</head>
<body>
<table class="tablemap">
<tr>
<td class="pixelblock">
<img class="pixelblockimage" src="https://www.destinationweddings.com/Portals/0/PropertyAgent/446/Images/27082.jpg" />
</td>
</tr>
<!--%TABLE%-->
</table>
</body>
</html>

最佳答案

使用 background-image 而不是像这样的简单图像:

.tablemap {
table-layout: fixed;
}


.pixelblock {
padding: 1px;
width: 120px;
height: 120px;
background-color: lightgrey;
overflow: hidden;
background-repeat:no-repeat;
}
<table class="tablemap">
<tr>
<td class="pixelblock" style="background-image:url(https://www.destinationweddings.com/Portals/0/PropertyAgent/446/Images/27082.jpg)">
</td>
</tr>
<!--%TABLE%-->
</table>

或者使图像成为绝对位置并且不要忘记 td 的相对位置:

.tablemap {
table-layout: fixed;
}

.pixelblock {
padding: 1px;
width: 120px;
height: 120px;
background-color: lightgrey;
overflow: hidden;
position:relative;
}

.pixelblockimage {
position:absolute;
top:0;
}
<table class="tablemap">
<tr>
<td class="pixelblock">
<img class="pixelblockimage" src="https://www.destinationweddings.com/Portals/0/PropertyAgent/446/Images/27082.jpg" />
</td>
</tr>
<!--%TABLE%-->
</table>

关于html - 在不调整大小和溢出的情况下将图像填充到表格单元格中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47654372/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com