div中如何设置table表格图片不超过边框-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

div中如何设置table表格图片不超过边框

2016-03-13 09:31:30 1849 1

为了效果明显一点我特意所有的元素都加上边框
这个是css

   #div_bottom_right_inner {
        margin-top: 5%;
        margin-left: 10%;
        margin-right: 10%;
        border:1px solid black;
        height:75%;
        padding-left: 100px;
        padding-right: 100px;
        over-flow:auto;(顺便说下,这句话去掉也不行,加上也是不对的)
    }
        #tab_img {
        height: 100%;
        width: 100%;
        border: solid thin red;
        table-layout: fixed;
        over-flow:auto;(顺和上面的一样,这句话去掉也不行,加上也是不对的)
    }
    #tab_img td {
        border: solid thin red;
    }
    #tab_img img {
        height: 100%;
        width: 100%;
    }
下面是html
 <div id="div_bottom_right_inner">
            <table id="tab_img">
                <tr>
                    <td><img src="../static/images/book.jpg" ></td>
                    <td></td>
                    <td><img src="../static/images/think.jpg" ></td>
                    <td></td>
                    <td><img src="../static/images/animals.jpg"></td>

                </tr>
                <tr>
                    <td></td>
                    <td><img src="../static/images/community.jpg"></td>
                    <td></td>
                    <td><img src="../static/images/book.jpg" ></td>
                    <td></td>

                </tr>
            </table>
    </div>

screenshot
请问各位老师,怎么设置可以让图片不超过表格,无论图片多大,如果太大就自动缩小,如果太小就自己放大。这样无论什么多大窗口都可以看到完整的图片。谢谢

取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:01:45
     #tab_img img {
            height: 100%;
            width: 100%;
        }

    这里使用 单位px 多大自己定义

    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 57787浏览量 回答数 19

43

回答

什么是云主机,云服务器与vps有什么区别?

zhuangdengyun 2011-11-01 04:21:50 51236浏览量 回答数 43

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 47679浏览量 回答数 19

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 147598浏览量 回答数 31

15

回答

网页挂马及暗链检测

yundun1 2012-02-24 17:40:01 47794浏览量 回答数 15

251

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 309487浏览量 回答数 251

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 81532浏览量 回答数 13

21

回答

【Java学习全家桶】1460道Java热门问题,阿里百位技术专家答疑解惑

管理贝贝 2018-05-31 13:57:45 48960浏览量 回答数 21

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 48300浏览量 回答数 46

3

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 49597浏览量 回答数 3
2735
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载