img图片自适应宽和高[转载]

最新推荐文章于 2024-04-10 17:21:13 发布

托莉雅·潘德拉贡

最新推荐文章于 2024-04-10 17:21:13 发布

阅读量2.9k

点赞数 1

文章标签： js html

本文链接：https://blog.csdn.net/qq_45251619/article/details/109545336

版权

控制缩略图常见的是JS来控制，还有就是最直接的方法定义img的宽高；下面两种方法自适应宽和高，zhenzhai推荐使用CSS方法；

一、CSS方法； 主 要是在CSS设置最小值和最大值(max-width: 100px; max- height: 100px;
width: expression(this.width >100 && this.height < this.width ? 100:
true); height: expression(this.height > 100 ? 100: true);)

<!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>
       <style type="text/css">
           a img {
   
               border: 0;
           }
   
           .imgthumblist {
   
              margin: 0 3px;
              padding: 0;

          list-style: none;
          }
  
              .imgthumblist li {
   
                  float: left;
                  display: inline;
                  text-align: center;
                  background: #F0F9FF;
                  width: 108px;
                  height: 163px;
                  width: 100px;
                  height: 155px;
                  overflow: hidden;
                  border: 1px solid #B9D0ED;
                  padding: 3px;
                  margin: 3px;
              }
  
                  .imgthumblist li.list1line {
   
                      height: 123px;
                      height: 115px;
                  }
  
                  .imgthumblist li.list2line {
   
                      height: 143px;
                      height: 135px;
                  }
  
          .contentL .imgthumblist li {
   
              margin: 0 1px 3px;
          }
  
          .imgthumblist p {
   
              margin: 0;
              line-height: 18px;
              font-size: 12px;
          }
  
          .imgthumblist div {
   
              line-height: 90px;
              font-size: 90px;
              height: 100px;
              display: table;
          }
  
              .imgthumblist div a {
   
                  display: table-cell !important;
                  display: block;
                  width: 100px;
                  vertical-align: middle;
              }
  
              .imgthumblist div img {
   
                  vertical-align: middle;

最低0.47元/天解锁文章

托莉雅·潘德拉贡

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
img图片自适应宽和高[转载]

控制缩略图常见的是JS来控制，还有就是最直接的方法定义img的宽高；下面两种方法自适应宽和高，zhenzhai推荐使用CSS方法；一、CSS方法；主要是在CSS设置最小值和最大值(max-width: 100px; max- height: 100px;width: expression(this.width >100 && this.height < this.width ? 100:true); height: expression(this.height &gt
复制链接

扫一扫