固定背景图的高度,让宽度自适应

将容器的高度固定,宽度设置成百分百,然后将background-size设置成cover。当宽度不够时,背景图的两边会隐藏

如下:将class是con的容器高度固定。宽度自适应

.con {
    width: 100%;
    height: 300px;
    background: url("image/vpb_intro/introduce_9.png") center center no-repeat;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘image/vpb_intro/introduce_9.png‘, sizingMethod=‘scale‘);
}
时间: 2024-10-14 13:23:45

固定背景图的高度,让宽度自适应的相关文章

css固定背景图位置 实现屏幕滚动时 显示背景图不同区域

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container { width: 100%; padding: 50px 0; padding-bottom: 30px; height: auto; } .container.image-containe

背景图合并

使用背景图合并技术,可以达到减少图片数量,从而减少HTTP请求的目的,对网站加速有着举足轻重的作用.背景图合并的优势: a)   可扩展,便于后期维护,当遇到排版变化时,比较容易维护. b)   宽度自适应本身就减少了页面的工作量,背景图合并可以和宽度自适应结合在一块,大大减少了页面数量和图片大小,提升页面的loading速度. 例: CSS样式: .aaa{height:34px;float:left;background:url("images/i.gif") 0 -34px re

background-size做自适应的背景图

在我们做页面布局的时候往往会遇到这样的情况当我固定一个元素的尺寸,在像元素加入背景的时候发现背景图片的原始尺寸很大,当我把背景图写入时往往超过元素很大一部分我们只能看见一部分的背景图在元素内显示! 如图所示这是我的背景图 我有一个div要加入这张背景图结果发现显示的结果和设计需要的效果完全不一样. div{ width: 400px; height: 200px; border: 1px solid red; background: url(2.jpg) 0 0 no-repeat; } <di

背景图background的例子分析及相关属性

今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)                             (图二) 这里给定了宽,也就是设备宽度的100%,同时给定了高,比如这里设置为8.5rem (html的字体设为20px); 1. 首先我们考虑用img标签来放图片路径,可是这种方法是很难控制图片高度的,如果我们设置宽度100%,让高度自适应,那么实际

未知高度的div自适应图片高度

<div style="background-image: url(http://your-image.jpg);"> <img src="http://your-image.jpg" style="opacity:0;" /></div> 用图片去占位,把div高度撑开就可以显示背景图片 同时改变背景图和图片的宽高就可以做到div高度自适应背景图的高度啦

NGUI 背景图自适应

背景图UISprite组件调整如下: UIRoot设置: 不保持比例自适应: 保持宽与屏幕宽一致,高度随宽的缩放比例进行缩放:

自适应浏览器高度和宽度+字体大小 JS(主要针对Java后端&gt;&gt;全栈工程师)

自适应浏览器高度和宽度+字体大小有点:1.能自动判断当前浏览器的高度和宽度(页面里面设置均百分比宽度)2.JS里面自己设置字体大小,在不同分辨率下显示不一样的字体3.在浏览器最大化时候,JS会自动判断屏幕高宽,从而使样式布局不会冲突变化4.在浏览器最小化时候,JS会自动判断屏幕高宽,从而使最小化的屏幕还和全屏效果一致,只是出现滚动条全屏效果图01最小化效果图02页面设计效果图自适应高宽JS效果图附上JS代码(引用前必须先引用Jquery!!!)// 作者:[email protected]//

CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime;} #right { float: right; width: 200px; background: lime;} #center { margin:0 200px; background: blue} html: <div id="left">left</div>

记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样 当屏幕大于600px时,是这样 我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0