纯css的防止图片撑破页面的代码(图片自动缩放)

最新推荐文章于 2022-05-05 15:54:09 发布
最新推荐文章于 2022-05-05 15:54:09 发布
阅读量417 收藏
点赞数
文章标签： css xhtml html class 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenbinqq164/article/details/4966888
版权

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>
</head>
<body>

<div class="content-width">
  <p><img src="/down/js/images/12567247980.jpg"/></p>
  <p><img src="/down/js/images/12567247981.jpg"/></p>
</div>

 

</body>
</html>

chenbinqq164
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片自动按比例缩小防止页面被图片撑破特效代码
03-20
在网页设计中，图片是不可或缺的元素，它们可以为...以上这些技术结合使用，可以有效地实现图片自动按比例缩小，防止页面被图片撑破的效果。在实际应用中，我们需要根据具体项目需求和用户设备特性进行灵活组合和优化。
图片自动按比例缩小代码防止页面被图片撑破.rar
07-04
这个压缩包文件"图片自动按比例缩小代码防止页面被图片撑破.rar"可能包含了实现这一功能的代码示例。 首先，我们需要理解基本的HTML图片元素`<img>`，它有`width`和`height`属性用于设置图片的显示尺寸。但若原图...
CSS3 盒子设置border和padding不撑开盒子
西柚2015地信小白GISer
05-05 6556
普通的盒子模型我们设置border会将盒子撑大 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scal
ASP控制图片显示的大小（等比例缩放）
酷狗⊙_⊙刀刀的专栏
10-11 2089
New Document var flag=false; function DrawImage(ImgD){  var image=new Image();  image.src=ImgD.src;  if(image.width>0 && image.height>0){   flag=true;   if(image.width/image.height>= 164/112){    if
css图片按比例缩放不变形
qq_39200924的博客
06-19 3万+
设置对应图片的width和htight的具体数值，img{width:auto;height:auto;max-width:100%;max-height:100%;},这样设置图片可以使图片在指定的空间内缩放。举例：&lt;div style="width:90px;height:60px"&gt; &lt;img src="a.jpg"&gt; &lt;!--这里我们假如图片的实际尺寸...
jQuery实现按比例缩放图片
weixin_30951743的博客
03-02 129
在网站中通常要显示各种尺寸的图片，但图片的尺寸不一定符合显示的要求。如果直接指定img的width和height属性的话图片又很可能会被挤压的变形。下面这个代码可以把图片放进一个imgBox，并根据imgBox的大小来按比例缩放图片以适应他，同时图片会在imgBox中居中显示。来看代码： 首先是HTML： Code 1<!DOCTYPEhtmlPUBLI...
兼容ie、firefox的图片自动缩放的css跟js代码分享
12-10
本文主要分享了如何实现兼容IE（尤其是IE6）和Firefox的图片自动缩放功能，以避免因图片过大而导致页面布局破坏的问题。需求是图片的最大宽度不超过600px，最大高度不超过800px。 首先，我们可以使用CSS3的`max-...
css 图片自适应宽度 CSS实现控制图片自适应显示宽度代码
12-13
在这个例子中，`fit-image`是一个类选择器，将这个类应用到图片元素上，图片就会在宽度超过500像素时自动缩放。`border: 0`是为了去除图片的边框，使其更简洁地融入页面布局。 然而，不幸的是，古老的Internet ...
css3网页加载后图片翻转效果代码
04-06
本主题聚焦于一个具体的CSS3应用：网页加载后图片的翻转效果。这种效果可以增加用户体验，使网页更具动态感和互动性。 首先，我们需要了解CSS3中的`transform`属性。这个属性允许我们对元素进行二维或三维空间的...
jQuery实现未知图片尺寸等比例缩放大图片
axl---专心专注于web前端开发
07-05 176
通常我们处理缩略图是使用后台代码（PHP、.net、Java等）根据大图片生成一定尺寸的缩略图，来供前台页面调用，当然也有使用前台javascript脚本将加载后的大图强行缩放，变成所谓的缩略图，这种方法不可取。但是，针对网站内容页，如本站文章详情页，如果需要加载一张很大的图片时，为了防止“撑破”布局，我们使用jQuery来等比例缩放图片。我们分两种情况来讲述： 1.已知图片尺寸 &lt;d...
图片（img）的等比例自动缩放
热门推荐
千千
06-17 5万+
img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 最近做公益项目用到了这个。根据父容器的自动缩放，并保持图片原来的比例...
jQuery实现等比例缩放大图片让大图片自适应页面布局
11-28 147
通常我们处理缩略图是使用后台代码（PHP、.net、Java等）根据大图片生成一定尺寸的缩略图，来供前台页面调用，当然也有使用前台javascript脚本将加载后的大图强行缩放，变成所谓的缩略图，这种方法不可取。但是，针对网站内容页，如本站文章详情页，如果需要加载一张很大的图片时，为了防止“撑破”布局，我们使用jQuery来等比例缩放图片。我们分两种情况来讲述： 1.已知图片尺寸 ...
img固定宽高，怎么解决不同尺寸图片显示会变形的问题
萌古大汗的专栏
05-31 2万+
一、父容器如div设置固定width和height，设置相对定位;img设置绝对定位，设置最大宽度max-width:100%，left、top、right、bottom值为0，设置margin:auto。这样可以解决不同尺寸的图片在同一个盒子里垂直水平居中，看起来又不会显得图片变形。...
图片溢出div，超出div解决办法
Harrietjia的博客
07-07 2万+
当我的图片宽度大小没有设置，过大的时候，它会超出我的div宽度。这个时候，我给它设置了一个小于我的div的宽度，它是可以进入div盒子而不溢出的，然而，当我们的浏览器缩小的时候，我的div是栅格布局，固定了百分比会随浏览器可视界面而缩小，但是此时图片因为固定宽度不能同步缩小，还是会发生溢出现象。还有一种将就的办法，就是设置overflow:hidden,隐藏溢出的部分，但是大家都可以预料的到那种糟...
css图片等比例缩放
ln_software的博客
10-26 215
max-width: 100%; max-height: 100%;
让图片按比例缩放显示
justsoloving的专栏
01-23 530
var flag=false; function DrawImage(ImgD){    var image=new Image();    image.src=ImgD.src;    if(image.width>0 && image.height>0)   {       flag=true;       if(image.width/image.height>= 15
css样式小结和脚本实现图片按比例缩放
zzyonepiece的专栏
05-07 1576
在用css3做圆形图片的时候 发现图片边框已经变圆，但图片还是方的。当然
纯css图片切换页面效果代码
最新发布
12-25
纯CSS图片切换页面效果可以通过使用CSS动画来实现。下面是一个简单的例子： HTML代码： ```html <div class="image-slider"> <input type="radio" name="slide" id="slide-1" checked> <input type="radio" name="slide" id="slide-2"> <input type="radio" name="slide" id="slide-3"> <div class="slides"> <div class="slide1"></div> <div class="slide2"></div> <div class="slide3"></div> </div> <div class="controls"> <label for="slide-1"></label> <label for="slide-2"></label> <label for="slide-3"></label> </div> </div> ``` CSS代码： ```css .image-slider { position: relative; width: 100%; max-width: 600px; margin: 0 auto; } .slides { position: relative; } .slides > div { position: absolute; top: 0; left: 0; width: 100%; height: 300px; opacity: 0; transition: opacity 0.5s; } #slide-1:checked ~ .slides .slide1, #slide-2:checked ~ .slides .slide2, #slide-3:checked ~ .slides .slide3 { opacity: 1; } .controls { position: absolute; bottom: 10px; width: 100%; text-align: center; } .controls label { display: inline-block; width: 15px; height: 15px; background: #333; border-radius: 50%; margin: 0 5px; cursor: pointer; } #slide-1:checked ~ .controls label:nth-child(1), #slide-2:checked ~ .controls label:nth-child(2), #slide-3:checked ~ .controls label:nth-child(3) { background: #fff; } ``` 这段代码中，我们使用了radio input来控制图片的切换，每个radio input对应一个图片，通过CSS选择器和:checked伪类来控制当前需要显示的图片。同时，添加了一组控制按钮，通过点击按钮来切换不同的图片。这样就实现了纯CSS图片切换页面效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值