范例必读（三）[table 中 img 自适应 div 大小缩放]

最新推荐文章于 2024-04-17 08:34:59 发布

原创最新推荐文章于 2024-04-17 08:34:59 发布 · 4.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#div #table #stylesheet #xhtml #border #class

前端专栏收录该内容

9 篇文章

订阅专栏

本文探讨了如何在HTML表格中实现图片自适应div大小的缩放技巧，通过合理使用div、table、CSS样式及class属性，确保图片在不同屏幕尺寸下保持良好显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-type" content="text/html">
	<link rel="stylesheet" style="text/css" href="css.css">
	<title>test3</title>
<style>
</style>
</head>
<body>

<hr/>
<table align="center">
  <tr>
   <td>
     <div class="container box">
		<img src="啊啊.jpg"/>
     </div>
   </td>
  </tr>
</table>

</body>

css.css:

	.container{
		margin: 6px;padding:5px;
		border: 1px solid #D0D0D0;
		-webkit-box-shadow: 0 0 8px #D0D0D0;
		background:white;
	}

	.box{ width:50px; border:1px #000 solid;}
	img{ max-width:50px!important; height:auto!important; width:expression(this.width > 50 ? "50px" : this.width)!important;}