CSS背景图片和HTML中的img标签

28人阅读 评论(0) 收藏 举报
分类:

背景图片:

该图片是218*170



css内容:

div{
	width: 100px;
	height: 100px;
	background: url(img/1.jpg);
	border: 2px solid red;
}


div{
	width: 500px;
	height: 500px;
	background: url(img/1.jpg);
	border: 2px solid red;
}

背景图片的默认格式:

当图片大于div时,图片部分填充;当图片小于div时,图片同时水平平铺和垂直平铺(背景图片的大小不发生改变)

可以通过background-size设置背景图片的大小

div{
	width: 300px;
	height: 300px;
	border: 2px solid red;
	background: url(img/1.jpg) no-repeat;
	background-size: 100%,100%;
}

background-size: contain  图片的宽和高都在div内部时,停止缩放。图片能完整显示

div{
	width: 100px;
	height: 100px;
	border: 2px solid red;
	background: url(img/1.jpg) no-repeat;
	background-size: contain;
}

background-size: cover图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;

div{
	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;使背景图片居中显示

没有使用时:

div{
	width: 1000px;
	height: 410px;
	border: 2px solid red;
	background-image: url(img/2.jpg);
}

使用background-position: center center;时,背景图片居中显示

div{
	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时,div不设置宽度,并在div中添加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');
});

查看评论

CSS HTML实现背景图片的填充

引言: 今天想写个人的欢迎界面,又折腾起了前端,然而真的捉急呀 为了美观点,花多点时间吧,又是凌晨三点了0.0 CSS实现单张背景图片的填充 实现方式一: 直接使用body元素的backgro...
  • nickwong_
  • nickwong_
  • 2016-03-05 02:44:55
  • 18994

HTML代码中IMG标签的全部属性

例:写一段图片HTML代码        该标签为img的代码中已可以看出已含有了四个属性,包括src id lang alt,加上本身的img标签有5个属性.    那么该img标...
  • hangxingkong
  • hangxingkong
  • 2016-07-19 10:36:07
  • 11398

如何让img设置成为div中的背景图片

img作为背景图片,div模块
  • u011594571
  • u011594571
  • 2014-12-04 21:06:28
  • 6750

前端HTML<img>标签图像的属性和使用/图像img与背景background的区别

1.图像的URL 1、URL           1、目录结构                目录:文件夹名称,保存网页内容的文件夹           2、URL                U...
  • baidu_25343343
  • baidu_25343343
  • 2016-10-06 00:29:07
  • 9050

html <div>标签内背景图片自适应div大小

只需通过css设置background-size属性为contain,即 background-size:contain 注意:一定要在先设置background之后再设置background-s...
  • m0_37828249
  • m0_37828249
  • 2017-10-29 14:41:58
  • 6554

Bootstrap CSS——Button&Img

http://v3.bootcss.com/css/#buttons http://v3.bootcss.com/css/#images mark 按钮
  • u011350527
  • u011350527
  • 2015-10-05 15:42:33
  • 676

html中img标签显示图片属性写法与background差异

.liuxijun{ border: none; width: 150px; height: 150px; background: url(../images/1.jpg) no-repeat...
  • yyyypooi
  • yyyypooi
  • 2016-12-08 11:19:38
  • 849

css让图片自适应容器(div)大小

不管容器有多大,只要将img的宽高设置成100%(这里的100%是相对于父级宽高而言)就能自适应容器大小。...
  • promiseCao
  • promiseCao
  • 2016-08-25 12:16:37
  • 90680

如何解决 img 标签上下出现的间隙

0.前言我们在平常的开发过程中,经常需要使用多张图片,而使用多张图片的时候,我们一般会去使用一个列表来对我们的img 进行承装。 Document im...
  • MR_LP
  • MR_LP
  • 2016-07-08 20:44:28
  • 5762

<img>设置background有白色边框

因为没有给img标签这是src,所以浏览器当做没有图片处理,给加上了白色边框,解决方法有两个: 1.添加一个空白图; 2.不用img标签,用span、div等等...
  • u010552788
  • u010552788
  • 2016-03-26 10:56:35
  • 992
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 1332
    排名: 3万+
    最新评论