`
yunfuby1
  • 浏览: 10541 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

用css控制div的最大最小高度和宽度,实现图片自适宽度

阅读更多

在网页布局的时候,很多时候我们需要控制图片或者某个div的最大高度/宽度,最小高度/宽度,以防止它们破坏网页的整体结构 ,这个时候可以使用下面的css进行控制。

  1.  * 最小?度 */
  2. .min_width{min-width:300px;
  3.    /* sets max-width for IE */
  4.    _width:expression(document.body.clientWidth < 300 ? "300px" : "auto");
  5. }
  6.  
  7. /* 最大?度 */
  8. .max_width{
  9.    max-width:600px;
  10.    /* sets max-width for IE */
  11.    _width:expression(document.body.clientWidth > 600 ? "600px" : "auto");
  12. }
  13.  
  14. /* 最小高度 */
  15. .min_height{
  16.    min-height:200px;
  17.    /* sets min-height for IE */
  18.    _height:expression(this.scrollHeight < 200 ? "200px" : "auto");
  19. }
  20.  
  21. /* 最大高度 */
  22. .max_height{
  23.    max-height:400px;
  24.    /* sets max-height for IE */
  25.    _height:expression(this.scrollHeight > 400 ? "400px" : "auto");
  26. }
  27.  
  28. /* 最大最小?度 */
  29. .min_and_max_width{
  30.    min-width:300px;
  31.    max-width:600px;
  32.    /* sets min-width & max-width for IE */
  33.    _width: expression(
  34.       document.body.clientWidth < 300 ? "300px" :
  35.         ( document.body.clientWidth > 600 ? "600px" : "auto")
  36.    );
  37. }
  38.  
  39. /* 最大最小高度 */
  40. .min_and_max_height{
  41.    min-height:200px;
  42.    max-height:400px;
  43.    /* sets min-height & max-height for IE */
  44.    _height: expression(
  45.       this.scrollHeight < 200 ? "200px" :
  46.         ( this.scrollHeight > 400 ? "400px" : "auto")
  47.    );
  48. }
  49. 原文:http://www.cnzheyu.com/news/hangye/hy-23-655.html
分享到:
评论

相关推荐

    css+div自适应窗口宽度

    在示例代码中,`.divGlobal`, `.DivTop`, `.DivBottom`这三个类都设置了`min-width`为760px,这表示这些div元素的最小宽度为760像素。当浏览器窗口宽度小于760像素时,这些div元素的宽度将不再缩小,以保证内容的...

    css控制div的宽度

    可以使用max-width和min-width属性限制div的最大和最小宽度。这在响应式设计中非常有用,确保元素在不同屏幕尺寸下保持合适的大小。 ```css div { max-width: 800px; min-width: 300px; } ``` 5. 内容盒模型...

    CSS:Div高度、宽度自应等技巧演示文件集合。

    - `max-width`和`min-width`:可以限制Div的最大和最小宽度,使其在不同屏幕尺寸下自适应。 ```css div { max-width: 100%; min-width: 300px; } ``` - 响应式设计:使用媒体查询(media queries)根据设备...

    CSS控制div宽度最大宽度/高度和最小宽度/高度的方法

    本文将深入探讨如何使用CSS来控制div元素的最大宽度和高度以及最小宽度和高度,特别关注在IE6中的兼容性问题。 首先,CSS提供`min-width`和`max-width`属性来限制元素的宽度。`min-width`确保元素的宽度不会小于...

    DIV CSS 图片自动换行

    通过使用 `class` 或 `id` 属性,我们可以为 `div` 元素赋予特定的CSS样式,实现图片的布局和交互效果。 在CSS中,我们通常会利用 `display` 属性来控制元素的布局方式。对于图片自动换行,最常用的方法是使用 `...

    CSS 实现div宽度根据内容自适应

    本文将详细介绍如何使用CSS来实现div宽度根据内容自适应。 首先,我们需要理解默认情况下,div元素作为块级元素,它的宽度会占据父元素的整个宽度,除非显式设置了宽度值。因此,如果希望div宽度自适应内容,我们...

    CSS控制页面最大最小宽度和高度可兼容IE6版本的实现方法

    本文将详细介绍如何利用CSS(层叠样式表)来实现对页面最大最小宽度和高度的控制,同时确保这些效果在包括IE6在内的多个浏览器版本中都能正常工作。 首先,我们需要了解CSS中的`min-width`、`max-width`、`min-...

    DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等)

    本篇文章将深入探讨`div`的一些进阶效果,包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先,让我们关注圆角`div`。CSS3引入了`border-radius`属性,使得我们...

    jquery ui Dialog 添加最大最小化按钮控制

    "jquery ui Dialog 添加最大最小化按钮控制"的主题涉及如何扩展jQuery UI Dialog的功能,使其具备最大化和最小化的操作,这对于创建更灵活且类似于桌面应用的网页交互体验至关重要。 jQuery UI Dialog组件默认情况...

    设置一个div层的最小宽度或最小高度

    在实际的网页设计中,一个div的最小宽度或最小高度设置可以基于多种因素,包括内容的展示需要、设计的美学要求和用户的使用体验。通常,设计师会针对不同的媒体查询(media queries)来定义不同的尺寸限制,以便让...

    CSS+DIV网页布局技巧(精髓)

    或者使用JavaScript动态设置最小宽度。 ##### 4. 解决IE的“3像素” bug 在IE中,当一个浮动元素旁边有一个固定宽度的元素时,该固定宽度的元素可能会出现3像素的额外外边距。解决方法是在浮动元素上设置负的右...

    html图片自适应手机屏幕大小的css写法

    总结以上知识点,我们了解到在HTML中使用CSS实现图片自适应手机屏幕大小的关键在于使用百分比宽度和自动高度的组合,确保盒模型的一致性,以及通过CSS Reset和重置默认布局减少浏览器间的差异。这些方法共同确保了在...

    DIV分栏宽度可以左右拖动变化的JS代码

    5. **优化**:你还可以添加一些额外的功能,比如限制最小和最大宽度,或者在调整过程中显示实时的宽度指示,以提供更好的反馈。 在提供的 "ExpandableColumns" 文件中,可能包含了一个实现此功能的完整示例,包括...

    Div+CSS基础代码网页布局+实例教程.pdf

    Div+CSS布局是网页设计中的核心概念,它使用HTML的`&lt;div&gt;`标签来构建网页的结构框架,然后用CSS来设置这些`&lt;div&gt;`元素的样式,实现更精确的布局控制。`&lt;div&gt;`是一个无语义的容器元素,可以容纳其他HTML元素,用于...

    css+div浏览器兼容技巧

    - 使用`min-width`可以确保页面的最小宽度,但IE不支持。为兼容IE,可以在`body`标签下添加一个div,并设置特定类,利用`width:expression`结合JavaScript实现。例如: ```css #container{ min-width: 600px; ...

    精通CSS+DIV源码 第六章

    2. **CSS盒模型**:理解CSS的盒模型,包括内容(content)、内边距(padding)、边框(border)和外边距(margin),以及如何计算元素的总宽度和高度。 3. **布局技术**:探讨CSS布局模式,如流体布局、网格布局、Flexbox...

    index(可移动最小化最大化div,鼠标坐标显示).zip

    标题中的“index(可移动最小化最大化div,鼠标坐标显示).zip”指示这是一个关于使用HTML和CSS实现可移动、最小化和最大化的div元素的示例项目。这个压缩包可能包含了一个名为“index”的HTML文件,该文件展示了如何...

Global site tag (gtag.js) - Google Analytics