`

使用css 实现图片自适应大小

    博客分类:
  • CSS
CSS 
阅读更多

在编写网页时,如果图片大小事先是未知的,如果图片过大的话,会影响的网页中其他块的结构

使用css可以将图片的大小调整到一个固定的值

#mian img{
 max-width:170px;
 width:170px;
 width:expression(document.body.clientWidth>170?"170px":"auto");
 max-height:180px;
 height:180px;
 height:expression(document.body.clientWidth>180?"180px":"auto");
 overflow:hidden;
}

 在如下html代码中

<div id = "maim">
<!--
在mian样式的块中img标签图片的大小会被固定在170px*180px
-->
<img src="01.jpg">
</div>

 如果图片的大小是事先未知的,这样设置可以使,图像的大小固定,从而不影响网页中其他块的结构

分享到:
评论

相关推荐

    CSS强制图片自适应大小.rar

    首先,我们需要理解CSS中的几个关键属性,它们在实现图片自适应方面起着决定性的作用: 1. **width** 属性:默认情况下,图片会保持其原始宽度和高度,但通过设置 `width: 100%;`,我们可以让图片的宽度与包含它的...

    <CSS强制图片自适应大小>

    ### CSS强制图片自适应大小详解 在Web开发中,经常需要处理各种尺寸的图片,并确保它们能在不同设备和屏幕尺寸上正确显示。特别是在响应式设计中,如何让图片能够根据容器或者视口的大小自动调整自己的尺寸是非常...

    根据图片大小自适应的CSS

    通过以上对“根据图片大小自适应的CSS”的深入探讨,我们可以看到,合理运用CSS和HTML的相关属性,可以有效地实现图片的自适应显示,提升用户体验,同时也让网站在各种设备上都能展现出良好的视觉效果。

    CSS控制图片自适应大小

    ### CSS控制图片自适应大小详解 ...综上所述,使用CSS控制图片自适应大小是一项实用且重要的技能。通过上述方法,我们可以有效地管理和优化网页中的图片展示,从而提升用户体验并保持页面的一致性和美观度。

    Jquery图片自适应大小并居中

    ### Jquery 图片自适应大小并居中 在前端开发中,经常遇到的一个问题是当页面中的图片尺寸不统一,特别是当图片的比例与显示区域的比例不匹配时,如何使得图片能够自适应显示区域,并且保持原有比例不变形。本文将...

    CSS实现自适应的图片背景边框

    "CSS实现自适应的图片背景边框"这个主题就是针对这一需求展开的。 首先,我们需要理解CSS中的`background-size`属性。这是一个关键的属性,用于设置背景图片的大小。默认值是`auto`,这意味着图片会按照自身的原生...

    js+css 图片列表自适应

    在网页设计中,"js+css图片列表自适应"是一个重要的技术点,它涉及到JavaScript和CSS两种核心技术,用于实现图片列表在不同设备和屏幕尺寸下的良好显示效果。这个主题主要包含以下几个方面: 1. **响应式设计**:...

    css图片自适应大小

    #### 知识点二:CSS实现图片自适应 与JavaScript相比,使用CSS来实现图片自适应更为简单高效,特别是在现代浏览器中,几乎所有的浏览器都支持CSS3的自适应特性。 ##### CSS代码实现 ```css img { max-width: 100%...

    自适应大小轮播图

    总的来说,自适应大小轮播图是网页设计中的一项关键技术,通过灵活的设计策略和编程技巧,可以为用户提供一致且优质的浏览体验,无论他们使用何种设备。学习并掌握这一技能,对于提升网站用户体验和设计师的专业素养...

    js+css实现背景图片自适应宽度导航代码

    "js+css实现背景图片自适应宽度导航代码"的主题旨在教你如何利用JavaScript(js)和层叠样式表(css)来创建一个背景图片能根据导航文字宽度自适应的导航条,同时模仿苹果产品的导航条效果。以下将详细介绍这一技术...

    css3实现自适应浏览器图片布局特效.zip

    此外,CSS3的Grid布局也是实现图片自适应的一种强大工具。通过创建网格系统,我们可以精确地控制图片在网格中的位置和大小。`grid-template-columns` 和 `grid-template-rows` 可以定义网格的列和行,而`grid-gap`则...

    js解决div内图片自适应大小

    总的来说,通过JavaScript和适当的CSS,我们可以实现img图片在大小未知的div中自适应显示,并兼容多种浏览器,包括老版本的IE。这种方法在实际项目中非常实用,能够确保用户在不同设备和浏览器上获得一致的视觉体验...

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

    针对给定文件提供的内容,我们将详细探讨在HTML中使用CSS实现图片自适应手机屏幕大小的方法。以下内容将涵盖相关的知识点,包括CSS属性、选择器、以及与响应式设计相关的概念。 首先,我们注意到文件中提供了一段...

    CSS实现的图片宽高自适应固定边框

    总结来说,通过CSS实现图片宽高自适应固定边框的关键点在于灵活使用max-width、width以及background-size属性,结合CSS布局技术,可以让图片在不失真的前提下适应不同大小的容器,从而提高网页的用户体验和视觉效果...

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

    总结起来,通过CSS的`max-width`属性可以有效地控制图片的最大宽度,从而实现图片自适应显示。在面对不支持`max-width`的老版IE浏览器时,可以使用`expression`作为临时解决方案,但应尽量避免,以提高性能和兼容性...

    HTML中使背景图片自适应浏览器大小.docx

    例如,可以使用JavaScript来实现背景图片的自适应浏览器大小,或者使用CSS3的媒体查询来实现响应式设计。 五、结论 背景图片的自适应浏览器大小是一个非常重要的技术点,在响应式网页设计中具有非常重要的意义。...

    自适应宽度的CSS圆角背景的按钮

    本文将深入探讨如何使用CSS实现自适应宽度的圆角背景按钮。这种技术允许按钮根据其内容自动调整宽度,同时保持其设计的一致性和美观性。 首先,我们需要理解CSS中的圆角属性`border-radius`。这个属性用于给元素的...

    CSS实现自适应的图片背景边框.rar

    "CSS实现自适应的图片背景边框"这个主题着重探讨如何使用CSS技术来创建一个能够根据屏幕尺寸自动调整的图片背景边框。在JavaScript标签的提示下,我们可能会涉及到一些动态调整或交互效果的实现。下面将详细讨论这个...

    jquery图片浏览自适应大小

    图片自适应大小的关键在于检测图片加载完成后的实际宽度和高度。jQuery提供`$(window).load()`或`$(document).ready()`函数来监听页面或图片加载事件。当图片加载完成后,可以通过`$(img).width()`和`$(img).height...

    图片自适应兼容IE8完美就解决方案

    对于IE8这样的老版本浏览器,由于其对现代CSS3属性的支持有限,实现图片自适应往往需要一些额外的技巧。本文将深入探讨如何在IE8上实现图片自适应的完美解决方案。 首先,我们了解HTML5中的`background-size`属性,...

Global site tag (gtag.js) - Google Analytics