掌握CSS类：轻松定制表格行中的图片展示（解决图片过大）

最新推荐文章于 2024-06-13 18:31:56 发布

星途码客

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量335

点赞数 8

分类专栏：前端#CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/2303_80856850/article/details/139169782

版权

前端#CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

导读（解决问题）

用.c4和.c4 img两个共同设置在<td>中既可以满足边框需求,也可以分离控制图片大小。（其中.c4和.c4 img是之后自定义的两个CSS类）

用CSS类设置图片，既可以满足边框需求,也可以分离控制图片大小，不再因为图片太大而困惑

解读

使用CSS类控制<table>中<tr>一行的图片设置

在网页设计中，表格<table>是一种常见的布局元素，尤其是在展示数据或图片时。然而，随着CSS的发展，虽然表格的布局功能逐渐被CSS Grid和Flexbox等现代布局技术所替代，但表格在某些场合下仍然是不可或缺的工具。当我们在表格的<tr>（行）中放置图片时，使用CSS类（class）来设置边框和图片大小是一种非常灵活和有效的方法。
设置<td>边框

首先，我们为包含图片的<td>元素设置了一个CSS类.c4。这个类只包含一个边框样式，用于给每个单元格添加黑色的边框。边框的宽度为1像素，样式为实线。

.c4 {    
    border: 1px solid black;    
    /* 注意：这里不需要设置 height 和 overflow，除非有特定需求 */    
}

在这个例子中，我们没有为.c4设置高度和溢出属性，因为图片的显示通常不需要这些限制。然而，如果你需要确保单元格具有特定的最小或最大高度，或者需要处理内容溢出的情况，你可以根据需要添加这些属性。

控制图片大小

接下来，我们使用.c4 img选择器来设置.c4类内图片的样式。这个选择器允许我们单独控制图片的大小和其他属性，而不影响其他元素。

.c4 img {    

    max-height: 100px; /* 设置图片的最大高度 */    

    width: auto; /* 保持图片的原始宽高比 */    

    display: block; /* 将图片作为块级元素显示 */    

    margin: 0 auto; /* 水平居中图片 */    

}

在这个CSS规则中，我们设置了图片的最大高度为100像素。同时，我们保持图片的宽度为自动，以确保图片不会失真，并保持其原始的宽高比。通过设置display: block;，我们将图片作为块级元素显示，这意味着图片将占据其父元素（即<td>）的全部宽度，并且可以在其上应用边（margin）和填充（padding）。最后，我们使用margin: 0 auto;来水平居中图片。

HTML示例

下面是一个包含图片的表格的HTML示例，展示了如何使用.c4
和.c4 img类来设置边框和图片大小。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Table with Images</title>  
<style>  
    .c4 {    
        border: 1px solid black;    
    }    
      
    .c4 img {    
        max-height: 100px;    
        width: auto;    
        display: block;    
        margin: 0 auto;    
    }  
</style>  
</head>  
<body>  
  
<table>  
    <tr>  
        <td class="c4"><img src="image1.jpg" alt="Image 1"></td>  
        <td class="c4"><img src="image2.jpg" alt="Image 2"></td>  
        <!-- 更多包含图片的单元格 -->  
    </tr>  
    <!-- 更多行 -->  
</table>  
  
</body>  
</html>

在这个示例中，我们创建了一个包含两行图片的表格。每个包含图片的<td>元素都应用了.c4类，以添加边框。同时，每个<img>元素都自动继承了.c4 img类的样式，从而限制了图片的最大高度并保持了其原始的宽高比。此外，图片还被水平居中显示在其父元素中。通过使用CSS类，我们可以轻松地控制表格中图片的外观和布局，而无需对每个图片进行单独的设置。

(如有说的不对的地方，欢迎指正)