两种自适应图片大小的布局方式比较

最新推荐文章于 2022-10-10 13:17:07 发布

axl234

最新推荐文章于 2022-10-10 13:17:07 发布

阅读量308

点赞数

分类专栏： css 文章标签：前端 xhtml ViewUI

本文链接：https://blog.csdn.net/axl234/article/details/84175771

版权

css 专栏收录该内容

104 篇文章 0 订阅

订阅专栏

第一种：采用display:table-cell;的方式实现自适应布局特点是图片变大文字变窄，行数变多。文字靠上与图片对齐，文字与图片不等高

<!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; charset=utf-8" />
<style>
/*基于display:table-cell的自适应布局*/
.cell {
display:table-cell;
*display:inline-block;
width:2000px;
*width:auto;
}
</style>
</head>
<body>
<div style="width:50%;">
        <img id="targetImage" src="mm1.jpg" width="128" class="l mr20" />
          <div class="cell"> 【魔都惊现~以物换物~交换商店】原来电影《第36个故事》中那个小店现实真的存在~在虹口足球场附近的这家店里，看中什么物件，只要拿出家中闲置的物品交换就行。用一个闲置的蜡烛台，换一个古筝演奏家登台时佩戴的耳环；用一台Lomo相机，换几张爱情主题的邮票…你想交换什么？
          </div>
</div>
<script>
var eleImage = document.getElementById("targetImage"),
widthInitImage = 0, isBeingLarge = true;

var funWidthImage = function() {
var widthImage = eleImage.width;
if (isBeingLarge) {
  widthImage += 2;
  if (widthImage > 256) {
   widthImage = 256;
   isBeingLarge = false;
  }
} else {
  widthImage -= 2;
  if (widthImage < widthInitImage) {
   widthImage = widthInitImage;
   isBeingLarge = true;
  }
}
eleImage.width = widthImage;

setTimeout(funWidthImage, 50);
};

if (eleImage) {
widthInitImage = eleImage.width;
funWidthImage();
}
</script>
</body>
</html>

第二种：采用图片左浮动，文字overflow:hidden;的方式实现自适应布局，图片放大文字宽度变小，高度和图片等高，上下都对齐

.demo {
width:500px;
margin:32px auto;
}
.demo img {
float:left
}
.cell {
overflow:hidden;
}
</style>
</head>
<body>
<div class="demo"> <img id="targetImage" src="mm1.jpg" width="128" class="l mr20" />
<p class="cell"> 【魔都惊现~以物换物~交换商店】原来电影《第36个故事》中那个小店现实真的存在~在虹口足球场附近的这家店里，看中什么物件，只要拿出家中闲置的物品交换就行。用一个闲置的蜡烛台，换一个古筝演奏家登台时佩戴的耳环；用一台Lomo相机，换几张爱情主题的邮票…你想交换什么？ </p>
</div>
<script>
var eleImage = document.getElementById("targetImage"),
widthInitImage = 0, isBeingLarge = true;

var funWidthImage = function() {
var widthImage = eleImage.width;
if (isBeingLarge) {
  widthImage += 2;
  if (widthImage > 256) {
   widthImage = 256;
   isBeingLarge = false;
  }
} else {
  widthImage -= 2;
  if (widthImage < widthInitImage) {
   widthImage = widthInitImage;
   isBeingLarge = true;
  }
}
eleImage.width = widthImage;

setTimeout(funWidthImage, 50);
};

if (eleImage) {
widthInitImage = eleImage.width;
funWidthImage();
}
</script>
</body>
</html>

axl234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两种自适应图片大小的布局方式比较

第一种：采用display:table-cell;的方式实现自适应布局特点是图片变大文字变窄，行数变多。文字靠上与图片对齐，文字与图片不等高 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...
复制链接

扫一扫

专栏目录