CSS3如何固定图片宽度使图片高度按图片比例自适应?

html-css010

CSS3如何固定图片宽度使图片高度按图片比例自适应?,第1张

动作面版,新建一个动作,名称和快捷键先好后"记录"---图像->图像大小,把高度改成你想要的尺寸,下面的约束比例勾上,确定,回到动作面版,点击右下脚的"停止播放/记录",这样你就有一个动作了!

不过还有一个更方便的方法,就是用acdsee,在缩略图的模式下,选中图片,"工具"->"图像大小"

/* 打印样式 */

@media print {

color: red

}

/* 手机等小屏幕手持设备 */

@media screen and (min-width: 320px) and (max-width: 480px) {

body {

background: yellow

}

}

/* 平板之类的宽度 1024 以下设备 */

@media only screen and (min-width: 321px) and (max-width: 1024px) {

body {

background: blue

}

}

/* PC客户端或大屏幕设备: 1028px 至更大 */

@media only screen and (min-width: 1029px) {

body {

background: green

}

}

/* 竖屏 */

@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

/* 横屏 */

@media screen and (orientation:landscape){对应样式}

手机、平板设备屏幕尺寸众多,宽度不一,写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。这个百分比尺寸不算太难但也不是个太轻便的活,如果你css不熟练的话最好先别折腾这块,把基础练好了来。

还有,用了css媒体查询后,ie6-8载入不了样式表,要引用个:Respond.js来让ie6-8下正确载入css。js自行百度,到处有下载。

想要网页宽度自适应,需要把网页元素宽度设置为百分比,还要在网页头部加上代码:<metaname="viewport"content="width=device-width,initial-scale=1.0"/>。

图片自适应,且不超过原始大小,需要设置最大宽度,代码如下:img{ width:100% max-width:100%}。

改进功能

浏览器首次使用时,根据用户显示分辨率大小决定是否默认显示收藏栏;

打开多个标签关闭浏览器时,提示用户确认;

搜索栏关键词提示;

搜索栏支持多个搜索引擎;5.内核窗口resize速度