纯css的防止图片撑破页面的代码(图片自动缩放)
<!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>
<p>代码编写:懒人西西(转载请保留版权信息)</p>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>
纯css的防止图片撑破页面的代码(图片自动缩放)的更多相关文章
- 纯css的防止图片撑破页面的代码图片会自动按比例缩小
- 彻底解决springboot修改页面和代码会自动重启
3.application.yml配置 spring.devtools.restart.enabled=falsespring.thymeleaf.cache=false 1.解决thymeleaf修 ...
- <转载>CSS解决图片过大撑破DIV的方法
DIV+CSS网页内容中如果插入大于DIV层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形,您是否遇到过?这里DIVCSS5给大家介绍几种解决图片撑破撑开网页DIV层方法. 图片撑破宽度解决 ...
- 简单而兼容性好的Web自适应高度布局,纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...
- 纯CSS实现蜂窝六边形的个性相册
概述 纯CSS实现蜂窝六边形的个性相册 详细 代码下载:http://www.demodashi.com/demo/12804.html 此案例主要用到CSS3的 transform 和 transi ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- 纯CSS实现扁平化风格开关按钮
开关样式预览图 前言 最近在基于bootstrap框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用bootstrap框架自带的一个按钮插件,结果在引用js的时候总是出错,就找了 ...
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
随机推荐
- Easyui的Dialog的toolbar的自定义添加
最近一直在写快速定制Web表格,基于Easyui,整个过程使用了大量的Easyui的dialog,每个dialog的代码大部分都雷同,感觉代码出现了很大程度的重复,然后想写一个通用的dialog设置函 ...
- 【Alpha】Daily Scrum Meeting第八次
一.本次Daily Scrum Meeting主要内容 抓紧冲刺(接下去两天都在下午增加一个小会议) 剩余任务的概况 二.项目进展 学号尾数 今日已完成任务 接下去要做 502 无 将数据库的数据转换 ...
- 服务器部署多个tomcat经验
如果想在服务器上部署两个或多个tomcat项目,可以采用多个端口的方法: 如何修改Tomcat端口? 答:在Tomcat的conf文件夹里有个server.xml文件,修改里面的<Conne ...
- C fwrite
功能:向文件读入写入一个数据块. 用法:fwrite(const void *buffer,size_t size,size_t count,FILE *stream); (1)buffer:是一个指 ...
- Oracle总结
摘自:http://www.cnblogs.com/linjiqin/category/283838.html oracle decode用法 select decode( x , 1 , ‘x is ...
- html和css的联系
前几天学习了一点html,今天团队为做项目一起学习时,又了解到了新的东西———css,通过组内队员的指导和对一些网站(三翼)的分析,发现了html和css之间联系密切.根据从网上了解的资料,发现htm ...
- 使用安卓手机上的shh软件ConnectBot管理您的Linux服务器
ConnectBot是一款在Android手机上通过命令行方式连接管理类Unix系统的软件(类Unix系统包含:FreeBSD.OpenBSD.NetBSD.Solaris.Mac.AIX.GUN/L ...
- MyEclipse 点击 部署 按钮 无效
找到MyEclipse的工作路径,我的是"D:\Workspace",到这个目录中去"\.metadata\.plugins\org.eclipse.core.runti ...
- CPP - sort
#include "stdafx.h" #include <iostream> #include <string> using namespace std; ...
- Glide请求图片能携带Cookie的哟!
在Web编程中我们都很熟知一个概念,当有了seesion登录状态时,你可以访问一些资源但如果你没有登录的话很多资源是无法访问的. 在android的WebApi中当然一样拥有这个概念.比如,用户的头像 ...