CSS实例教程:img随div宽度自动变化

文章简介:css设置img随div宽度变化自动变化的方法。

说明:
因为屏幕分辨率不同,想实现浏览器中的一个层随浏览器宽度高度的变化而变化,使层始终占浏览器宽度的90%;高度的75%;层中的图片随这个层的变化而变化,相信很多人都在实际的项目中遇到过这个问题,下面是实现这种效果的解决方案:

body { text-align:center;}
html,body { height:100%;}
.div1 { height:75%; width:90%; margin:0 auto; overflow:hidden;}
.div1 img { width:100%; display:block;}

这样设置的话就实现了上面说明的效果,大家可以试一下。

时间: 2024-12-28 03:22:25

CSS实例教程:img随div宽度自动变化的相关文章

css div宽度自动隐藏并且显省略号

<html xmlns="http://www.111cn.net/1999/xhtml"> <head> <title>css div宽度自动隐藏并且显省略号</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head&g

CSS实例教程:简单的button风格的UI按钮

文章简介:CSS实例教程:简单的button风格的UI按钮. button应该是UI库中最常用到的一种.我个人对google+的那种简单的button风格比较喜欢,因为那样在不同的浏览器下视觉差异不是很大.不过现在自己确实已经没有心思去琢磨怎么去弥补ie的不足,所以下面的东西就不要拿ie打开了.还是贴出代码吧 <!DOCTYPE html> <html> <head>                        <title></title> 

CSS实例教程:简单的的滑动导航栏效果

文章简介:CSS实例教程:简单的的滑动导航栏效果. 由于网页字体的限制,以及对导航栏美观的需求,使用background-repeat来做一个简单的文字导航栏已经远远不够了.在很多场合,导航栏的背景是一个图案,字体也不再是单调的宋体,这就需要我们把导航栏的整体效果做图在网页中使用. 今天我们就来做一个简单的的滑动导航栏效果(不知道应该叫它什么^_^),效果如下图:   思路:通过改变链接鼠标悬停状态(hover)的背景图片,来达到把鼠标放上去有高亮显示的效果. 方法:在本例中,我们是通过调整各链

CSS实例教程: 网页中制作浮层叠加效果

文章简介:CSS Overlay技巧. 创建遮照图有几种技术:从使用绝对定位的元素到outline和伪元素.在本文中,我们将探索每个技术的实现样式以及他们之间的利与弊. 设计模式通常是一组最佳实践和技术,主要目的是用来解决一些最常见的设计"问题",通常是在上下文中提出的设计原则.这些原则之是一"停留在页面"的原则.这一原则是建立在页面刷新都打破用户的心中想要的流程基础上,造成所谓的"变盲",我们需要用户无论保时何地可以避免打破这种视觉流程. 我们

CSS实例教程:CSS Selector的优先级

文章简介:11个class与一个id"谁的优先级高的问题. 上周五下班前我们敬爱的三三大人又在组里讨论了关于"11个class与一个id"谁的优先级高的问题-_-! 猜一下 01 <!DOCTYPE HTML> 02 <html> 03 <head> 04 <meta charset="utf-8"> 05 <style type="text/css"> 06 body{fon

宽度自动变化-Linearlayout宽度如何随里面的文本控件宽度变化而变化?

问题描述 Linearlayout宽度如何随里面的文本控件宽度变化而变化? 一个linearlayout里面有个文本,我想的效果是,文本的内容会变化,宽度也变化:实际效果是当linearlayout的被撑宽了,里面的文本变短后, linearlayout还是之前那么长,有没有什么办法让他随着文本宽度变化而变化呢? <LinearLayout android:id=""@+id/flower_hint"" android:layout_width="&

CSS实例教程:非浮动区域设置宽度

前一段时间我在做Green Gaint这个主题的时候,发现了一个在布局中出现的关于浮动的问题.让我来说明一下,如下图所示: 我们假设有一个容器A,在这个容器内有两个容器B和C,B设置了高度和宽度,并且向左浮动,C没有浮动,它将围绕在B区域的周围,这是典型的浮动效果,没有问题. 但是当C容器设置了宽度之后,并且B和C的宽度之和小于A容器之后的效果,在Firefox和IE8中是这样的: 在IE6和IE7中的表现是这样的: 在这里,让我们将B区域看作是网页中的主要内容区,C区域看作是侧边栏,要达到B在

[css]简明教程 SPAN和DIV的区别

css|教程|区别 SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落.标题.表格,乃至诸如章节.摘要和备注等.而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当行内元素都不合适时,可以使用SPAN. 下面以一个实例来说明这两个属性的区别. 代码: <span>SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了.在此例中,<sp

CSS实例教程:用列表ul制作CSS横向菜单的基础知识

在前面的文章中学习<用列表ul制作CSS横向菜单的基础知识>/article.asp?id=395.实现的原理我们都能理解了,但这样的菜单还远远不能满足我们的需要,我们需要制作出比较美观的菜单,我们今天学习让菜单有一个矩形的背景,并且当鼠标激活时能有所变化(hover).废话不多说了,让我们开始吧! <ul id="nav">       <li><a href="http://www.111cn.net/">Div+