如何用CSS使图片自适应显示宽度

2023-04-24 02:13:02html-css018

如何用CSS使图片自适应显示宽度,第1张

如何用CSS使图片自适应显示宽度公司的专案中需要显示由使用者提供URI连结的图片，可是预先无法获知图片的尺寸大小，如果图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩图，涉及的后台工作较为复杂，用CSS进行控制是一个可以接受的捷径。如果用width 属性强行设定显示尺寸似乎太不智慧。幸好Firefox/Opera/IE 7 都提供了 max-width 属性支援。假定希望图片显示宽度不超过500画素，CSS可能如下：以下是引用片段：以下是引用片段： fit-image{ border:0max-width:500px}IE6 不支援 max-width 属性，但是利用 IE 独有的 expression 属性可以迂回的解决这个问题。以下是引用片段：以下是引用片段： fit-image{ border:0max-width:500pxwidth:expression( function(img){ img.onload=function(){ this.style.width=’’this.style.width=(this.width500)?"500px":this.width+"px"}return’120px’载入时显示宽度为120px }(this))}利用<img的onload 事件使图片载入完成后计算其尺寸大小，如果超过500画素就显示为500画素，否则显示其预设宽度。 expression 不是符合WEB标准的做法，不到万不得以不建议使用。但是不能不承认IE的很多扩充套件是不错的，IE不应该被轻视!

CSS程式码如何使图片自适应显示宽度

图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩图，涉及的后台工作较为复杂，用CSS进行控制是一个可以接受的捷径。如果用width 属性强行设定显示尺寸似乎太不智慧。幸好 Firefox/Opera/IE 7 都提供了 max-width 属性支援。假定希望图片显示宽度不超过500画素，CSS可能如下：以下是引用片段：以下是引用片段：

fit-image {

border : 0

max-width : 500px

} IE6 不支援 max-width 属性，但是利用 IE 独有的 expression 属性可以迂回的解决这个问题。以下是引用片段：以下是引用片段：

fit-image {

border : 0

max-width : 500px

width: expression (

function(img){

img.onload=function(){

this.style.width = (this.width >500)?"500px":this.width+"px"}return ’120px’ 载入时显示宽度为120px}(this))} 利用<img>的onload 事件使图片载入完成后计算其尺寸大小，如果超过500画素就显示为500画素，否则显示其预设宽度。 expression 不是符合WEB标准的做法，不到万不得以不建议使用。但是不能不承认IE的很多扩充套件是不错的，IE不应该被轻视!

css怎么让图片自适应

看什么情况了

一是通过将该图片设定为某个div的背景图片，然后该div的长宽不使用绝对的px，使用相对的em或者rem。

二是将图片设定display：block，设定图片的长宽为rem或者em。

还是要看是什么情况下来去自适应图片的，

如何使用CSS强制图片自适应大小

<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" " :w3./TR/x1/DTD/x1-transitional.dtd">

<xmlns=" :w3./1999/x">

<head>

<title>无标题文件</title>

img {width:expression(this.width>600?"580px":this.width+"px")}

</style>

</head>

<body>

图片宽度大于600画素都强制显示为580画素宽<br><br>

<div>

</div>

</body>

</>

如何是页面上的图片自适应页面宽度？

如何用纯CSS将图片填满div，自适应容器大小

将图片的宽和高的属性设定为100%即可

例如图片的类名为pic

.pic{width: 100%height: 100%}

如何让input宽度自适应?

很多时候文字框输入的内容是不固定的，有时候输入的内容多一些需要宽一些有时候输入的内容少一些需要窄一些，所以需要设定input的宽度自适应。

工具原料：编辑器、jQuery

1、解决宽度自适应的思路是使用jQuery来监听输入事件，进而进行动态的改变input的宽度，实现input宽度自适应的效果。

2、首选获取文字的宽度，利用pre 元素可定义预格式化的文字，被包围在 pre 元素中的文字通常会保留空格和换行符而文字也会呈现为等宽字型，简单的程式码示例如下：

var textWidth = function(text){ var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'})$('body').append(sensor)var width = sensor.width() sensor.remove()return width }

3、根据以上获取到的文字的宽度来给input系结事件动态改变宽度，简单的程式码示例如下：

$("input").unbind('keydown').bind('keydown', function(){$(this).width(textWidth($(this).val())) })

input高度固定，自动增宽<br>

<br>

textarea宽度固定，自动增高<br>

你好，如果只考虑高级浏览器，这个需求很好做，一句简单的css代码就可以搞定了：html,body {width: 100%height: 100%}body {background-image: url(images/bg.png)background-size: cover}其中background-size的取值：cover：保证背景不变形填满窗口，超出部分被裁剪contain：保证整张背景图片在body内部，不足区域留白二者都能保证背景随窗口大小变化而自适应。另，如果是要考虑到低级浏览器，这个稍微麻烦点，不过可以给你提供解决方案设置一个背景img标签，fixed定位，填满整个窗口window.onresize的时候，动态计算img标签的尺寸，同时改变定位位置希望能解决你的问题，如有疑问欢迎追问，望采纳~

HTML中怎么让背景图片跟着浏览器窗口变大变小？

你可以先用表格，按%显示表格，表格里再背景就OK了，<table width=316 height=76 border=0 cellpadding="0" cellspacing="0">

<tr>

ASP如何设置背景图片平铺浏览器窗口

首先要看你的背景图片是不是够大如果不够大，要设置背景平铺，就会有背景重复和不重复的问题。

background:url(背景.gif) no-repeat这个是背景图片不重复。

background:url(背景.gif)这个是重复，并且是上下左右的重复。

background:url(背景.gif) repeat-x这个是背景横向重复。

background:url(背景.gif) repeat-y这个是背景纵向重复。

背景图片怎样随浏览器的大小而改变大小

用背景图像重复这种方法很简单，也很常用，在dreamweaver软件里，具体步骤是：菜单“修改”->“页面属性”（快捷键：ctrl+J）->“外观”->按自己的实际要求来选择背景图像和重复参数。

代码是：