背景图片:
该图片是 218*170
CSS 内容:
- p{
- width: 100px;
- height: 100px;
- background: url(img/1.jpg);
- border: 2px solid red;
- }
- p{
- width: 500px;
- height: 500px;
- background: url(img/1.jpg);
- border: 2px solid red;
- }
背景图片的默认格式:
当图片大于 p 时, 图片部分填充; 当图片小于 p 时, 图片同时水平平铺和垂直平铺 (背景图片的大小不发生改变).
可以通过 background-size 设置背景图片的大小
- p{
- width: 300px;
- height: 300px;
- border: 2px solid red;
- background: url(img/1.jpg) no-repeat;
- background-size: 100%,100%;
- }
background-size: contain 图片的宽和高都在 p 内部时, 停止缩放. 图片能完整显示.
- p{
- width: 100px;
- height: 100px;
- border: 2px solid red;
- background: url(img/1.jpg) no-repeat;
- background-size: contain;
- }
background-size: cover 图片宽高比不变, 铺满整个容器的宽高, 而图片多出的部分则会被截掉;
- p{
- width: 100px;
- height: 100px;
- border: 2px solid red;
- background: url(img/1.jpg) no-repeat;
- background-size: cover;
- }
background-size:contain 和 cover
相同点: 都是将图片以 ** 相同宽高比 ** 缩放以适应整个容器的宽高.
不同点:
1. 在 no-repeat 情况下, 如果容器宽高比与图片宽高比不同,
cover: 图片宽高比不变, 铺满整个容器的宽高, 而图片多出的部分则会被截掉;(图片不完整)
contain: 图片自身的宽高比不变, 缩放至图片自身能完全显示出来, 所以容器会有留白区域;(图片是完整的)
2. 在 repeat 情况下: cover: 与上述相同; contain: 容器内至少有一张完整的图, 容器留白区域则平铺背景图, 铺不下的再裁掉.
background-position: center center; 使背景图片居中显示
没有使用时:
- p{
- width: 1000px;
- height: 410px;
- border: 2px solid red;
- background-image: url(img/2.jpg);
- }
使用 background-position: center center; 时, 背景图片居中显示
- p{
- width: 1000px;
- height: 410px;
- border: 2px solid red;
- background-image: url(img/2.jpg);
- background-position: center center;
- }
img 标签中的图片
如果 img 设置了宽, 图片的宽和高是等比缩放
- img{
- width: 640px;
- }
- img{
- width: 320px;
- }
两种结合的轮播效果
屏幕大于 768px 时, 高度设置 410px, 高度不发生改变, 宽度一直变化, 且图片一直居中.
屏幕小于 768 时, p 不设置宽度, 并在 p 中添加 img 标签
- @media (min-width: 768px) {
- #main_ad> .carousel-inner> .item {
- height: 410px;
- }
- }
- #main_ad> .carousel-inner> .item> img {
- width: 100%;
- }
js 文件
- $(function() {
- // 当文档加载完成才会执行
- /**
- * 根据屏幕宽度的变化决定轮播图片应该展示什么
- * @return {[type]} [description]
- */
- function resize() {
- // 获取屏幕宽度
- var windowWidth = $(window).width();
- // 判断屏幕属于大还是小
- var isSmallScreen = windowWidth <768;
- // 根据大小为界面上的每一张轮播图设置背景
- // $('#main_ad> .carousel-inner> .item') // 获取到的是一个 DOM 数组 (多个元素)
- $('#main_ad> .carousel-inner> .item').each(function(i, item) {
- // 因为拿到是 DOM 对象 需要转换
- var $item = $(item);
- // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
- var imgSrc =
- isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
- // jQuery 方式
- // $element.data()
- // 是一个函数 , 专门用于取元素上的自定义属性 (data-abc)
- // 函数的参数是我们要取得属性名称 (abc)
- //
- // $element.attr('data-abc')
- //
- // JS 中的写法
- // element.dataset['abc']
- //
- // element.getAttribute('data-abc')
- // element.setAttribute('data-abc','')
- // 设置背景图片
- $item.css('backgroundImage', 'url("' + imgSrc + '")');
- //
- // 因为我们需要小图时 尺寸等比例变化, 所以小图时我们使用 img 方式
- if (isSmallScreen) {
- $item.html('<img src="' + imgSrc + '"alt="" />');
- } else {
- $item.empty();
- }
- });
- }
- // $(window).on('resize', resize);
- //// 让 window 对象立即触发一下 resize
- // $(window).trigger('resize');
- $(window).on('resize', resize).trigger('resize');
- });
来源: https://www.2cto.com/kf/201804/737760.html