`
zhangfeilo
  • 浏览: 399749 次
  • 性别: Icon_minigender_1
  • 来自: 昆明
社区版块
存档分类
最新评论

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

    博客分类：
  • html
htmlImgauto 
阅读更多 
<!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="images/01.jpg"/></p>
  <p><img src="images/02.jpg"/></p>
</div>
</body>
</html>

 

0
顶
1
踩
分享到：
| JAVA导出Excel
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    图片自动按比例缩小代码防止页面被图片撑破.rar

    这个压缩包文件"图片自动按比例缩小代码防止页面被图片撑破.rar"可能包含了实现这一功能的代码示例。 首先，我们需要理解基本的HTML图片元素`&lt;img&gt;`，它有`width`和`height`属性用于设置图片的显示尺寸。但若原图...

    图片自动按比例缩小防止页面被图片撑破特效代码

    在网页设计中，图片是不可或缺的元素，它们可以为...以上这些技术结合使用，可以有效地实现图片自动按比例缩小，防止页面被图片撑破的效果。在实际应用中，我们需要根据具体项目需求和用户设备特性进行灵活组合和优化。

    css图片缩放 通过css控制图片自动缩放至css定义大小

    如果图片的原始宽度超过了630像素，CSS会自动缩放图片，直到宽度不超过630像素。这种方式适用于图片宽度超过预设尺寸时的场景。 此外，还可以使用`width`属性结合CSS表达式来控制图片尺寸。例如，`width:expression...

    可自动缩放的JS弹性相册代码.rar

    本文将深入探讨“可自动缩放的JS弹性相册代码”这一主题，帮助开发者理解如何利用JavaScript创建一个能根据浏览器窗口大小自适应调整的图片相册。 一、JavaScript基础 在构建任何JS特效之前，首先需要了解...

    CSS控制DIV里图片的宽度固定 而高度自动缩放比例.docx

    标题所提到的“CSS控制DIV里图片的宽度固定而高度自动缩放比例”就是一种常见的图像布局策略，它能够确保图像在宽度改变时，高度按照原图的比例自动调整，避免图像变形。 首先，我们要理解CSS中的盒模型，每个HTML...

    js技术实现html页面上对图片的拖动与缩放

    为了实现拖动和缩放，我们需要为图片添加额外的CSS样式和JavaScript事件监听器。 **一、图片拖动** 1. **添加可拖动属性**：在HTML中，我们可以通过`draggable="true"`属性使图片变得可拖动。 ```html ``` 2. **...

    C# WebBrowser页面内容缩放

    注意，缩放级别以百分比表示，范围从50%到400%，以防止过度缩放。 在实际项目中，你可能还需要考虑其他因素，如添加键盘快捷键或菜单项来触发缩放操作，以及确保缩放操作在页面加载完成后进行，避免影响用户体验。...

    js拉帘缩放广告代码

    总之，"js拉帘缩放广告代码"涉及到的是一段利用JavaScript和CSS实现的网页动态广告效果，通过编程实现广告的自动展示、缩放和消失，同时兼顾用户体验和视觉效果。对于网页开发者来说，理解和实现这样的效果有助于...

    指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）

    在提供的代码中，有两个JavaScript函数用于实现图片按比例缩放，以适应指定区域的大小，防止图片撑破页面。这两个函数分别是`ResizeImages`和`controlImg`。 1. `ResizeImages`函数： 这个函数首先定义了最大宽度`...

    网页图片处理代码全集整理

    这段代码实现了图片的自动缩放功能，当图片宽度超过屏幕宽度减去350像素时，图片的宽度会被调整为屏幕宽度减去350像素。这种方法可以确保图片在不同分辨率的屏幕上都能得到合适的显示效果，不会因为图片过大而影响...

    图片等比缩放展示

    这段代码设置图片的最大宽度为容器宽度的100%，高度会自动根据宽度的比例进行调整，从而实现等比缩放。当容器大小改变时，图片也会相应地等比缩放。 在实现翻页滚动时，可以使用CSS的`overflow`属性。例如，如果...

    图片轮播中自动缩放图片插件 for PHPwind7.5 GBK utf8.rar

    这个名为“图片轮播中自动缩放图片”的插件，专门针对PHPwind7.5设计，旨在解决图片在轮播展示时可能出现的显示变形问题。 1. **插件功能解析：** - **自动缩放**：该插件的核心功能是根据轮播区域的尺寸动态调整...

    lightbox插件图片全屏缩放下载功能代码

    Lightbox插件是一种常见的网页元素，它允许用户在不离开当前页面的情况下查看大图或多媒体内容，如图片、视频和IFRAME等。这款特定的Lightbox插件提供了全屏缩放和下载功能，增强了用户体验，尤其适用于图像展示丰富...

    自动图片切换导航特效（JavaScript）适用于网站首页图片切换,美观

    在压缩包中的"自动图片切换导航特效（JavaScript）"文件，可能包含了实现这个特效的所有必要文件，比如HTML、CSS和JavaScript代码。你可以通过下载并解压这个文件，然后在本地环境中打开HTML文件查看效果。同时，也...

    CSS3滚动瀑布流图片加载动画特效

    - **异步加载**: 通过Ajax或Fetch API实现图片的异步加载，防止一次性加载过多图片导致页面卡顿。 - **DOM操作**: 动态插入新加载的图片元素，更新瀑布流布局。 **4. 文件结构解析** - `index.html`: 主要包含HTML...

    兼容ie、firefox的图片自动缩放的css跟js代码分享

    本文主要分享了如何实现兼容IE（尤其是IE6）和Firefox的图片自动缩放功能，以避免因图片过大而导致页面布局破坏的问题。需求是图片的最大宽度不超过600px，最大高度不超过800px。 首先，我们可以使用CSS3的`max-...

    css 图片自适应宽度 CSS实现控制图片自适应显示宽度代码

    在这个例子中，`fit-image`是一个类选择器，将这个类应用到图片元素上，图片就会在宽度超过500像素时自动缩放。`border: 0`是为了去除图片的边框，使其更简洁地融入页面布局。 然而，不幸的是，古老的Internet ...

    JS+css 图片自动缩放自适应大小

    根据给定的文件内容，以下知识点详细解释了图片自动缩放自适应大小的相关技术实现： 1. **图片自适应容器大小** - 在文档中提到了使用CSS的`max-width`属性来限制图片的最大宽度，该属性在多数现代浏览器（如IE7及...

    页面按比例缩放JS.rar

    6. **防止页面失真**：缩放可能会导致文本和其他元素的模糊，因此在实现缩放功能时，需要特别注意保持清晰度。可以设置`-webkit-text-size-adjust`或`font-size`来调整文本大小，以适应缩放后的页面。 7. **优化...

Magicbox
Global site tag (gtag.js) - Google Analytics