精华内容
下载资源
问答
  • WEB网页如何让背景图片跟随可视窗口自适应大小
    千次阅读
    2017-06-15 21:29:00

    HTML代码

    <body id="body">
        <div class="info-wrapper">
            <div class="content">
            </div>
         </div>
    </div>

    CSS代码

    body{
      font-size: 16px;
      font-family: Arial;
      max-width: 1920px;
      min-width: 1180px;
      margin:0 auto;
      overflow-y:scroll; 
    }
    
    .info-wrapper{
        position: absolute;
        margin: 0px;
        width: 100%;
        height: 560px;
        top: 1563px;
        text-align: center;
    }
    
    .content{
        width: 100%;
        height: 560px;
        margin: 0 auto;
        overflow: hidden;
        background: url(../images/index/background.png) no-repeat;
    }

    JS代码

    var screenWidth=$(window).width();
                
    $("#body").css("width",screenWidth);

     

    转载于:https://www.cnblogs.com/dreamsqin/p/7020164.html

    更多相关内容
  • 由于上传图片大小是未知的,在显示成缩略图的时候必须进行按比例的缩放才能美观地显示,本文将为大家简单的介绍一种比较不错的方法,有此需求的朋友可以参考下
  • 上传图片支持预览,计算图片大小
  • 网站导航栏下方的主体内容分为五个部分,分别是晴空、海边、田野、青春、成熟,每部分内容都包括一张图片和对应主题的文字介绍,图片跟文字的排版使用div+css样式控制宽高和间距大小网页底部是使用footer标签的...
  • 在页面中改变图片浏览的大小。打开网页时时页面变大或变小。
  • 怎么用css设置图片大小

    万次阅读 2021-06-11 09:56:19
    下面本篇文章举例讲解怎么用css设置图片大小,有需要的朋友可以参考一下,希望对大家有所帮助。使用css设置图片大小1、新建一个html文件,命名为test.html,用于讲解CSS怎么改变图片的大小。2、在test.html文件中,...

    在制作html页面中,经常需要使用css来改变图片的大小来实现想要的效果,css设置图片大小有几种方法。下面本篇文章举例讲解怎么用css设置图片大小,有需要的朋友可以参考一下,希望对大家有所帮助。

    0aa3206d4beb0633faac340575b08eae.png

    使用css设置图片大小

    1、新建一个html文件,命名为test.html,用于讲解CSS怎么改变图片的大小。

    2、在test.html文件中,使用div标签创建一个模块,在div标签内,使用img标签创建一张图片。

    28cb747be7ccf0887f222e05ebc2076f.png

    3、在test.html文件中,在css标签内,使用“*”来初始化页面所有元素,设置内外边距都为0。在浏览器打开test.html文件,查看实现的效果。

    88545d1ff3cde641a3124da7f902dfcc.png

    3b60021cdd6f57f75be99d21daacf183.png

    4、通过元素名称来改变图片的大小。例如,在css标签内,使用css定义div元素内的img元素的宽度为200px,高度为100px。

    34d0e41436278b400790488a7fa54f5c.png

    5、通过给img标签设置一个id属性,在css中通过id属性,使用width(宽度)和height(高度)设置样式,实现改变图片的大小。

    4d6d35d3bb6eed0ffb759862f78b07ab.png

    6、通过给img标签设置一个class属性,在css中通过class属性,使用width(宽度)和height(高度)设置样式,实现改变图片的大小。

    910263afb9f6563650433e553e88a281.png

    7、通过在img标签内,使用style来设置width(宽度)和height(高度)属性。

    588301ac37d32b6619a6cd9dc2d9f2b2.png

    以上几种方法实现的效果如下:

    e8a6aff04a3fc7f4182a240b81d3d8fa.png

    总结:

    方法一:在css样式中,通过元素名称(即img),使用width(宽度)和height(高度)设置样式,实现改变图片的大小。

    方法二:在css样式中,通过给img标签设置一个id属性,再使用width(宽度)和height(高度)通过该id来设置样式。

    方法三:在css样式中,通过给img标签设置一个class属性,再使用width(宽度)和height(高度)通过该class来设置样式。

    方法四:在img标签内,使用style来设置width(宽度)和height(高度)属性。

    更多css的相关知识,可访问:web前端课程!!

    展开全文
  • //设置#bigimg元素的src属性值 /* 获取当前点击图片的真实大小,并显示弹出层及大图 */ $(bigimg).attr('src',src).load(function(){ var windowW = $(window).width(); //获取当前窗口宽度 var windowH = $(window...

    直接上代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>xxx</title>
        <style>
            #outerbox{
                width: 100%;
                height: 100%;
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                background: rgba(0, 0, 0, 0.6);
                z-index: 9;
            }
            #innerbox{
                position: absolute;
                z-index: 99;
            }
            #innerbox #bigimg {
                cursor: grab;
                border: 5px solid #ffffff;
            }
        </style>
        
        <!-- 引入jquery 这里是我放jq脚本的文件路径,可自行设定 -->
    	<script src="__PUBLIC__/Js/jquery-1.7.1.js?v=1.0.0" type="text/javascript"></script>
    </head>
    <body>
    	<div id="conbox">
    		<p><img class="imgitem" src="/xxx/xxx.png" /></p>
    		<p><img class="imgitem" src="/xxx/xxx.png" /></p>
    		<p><img class="imgitem" src="/xxx/xxx.png" /></p>
    	</div>
    
        <div id="outerbox">
            <div id="innerbox">
                <img id="bigimg" src="" />
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
        $(function(){
    		var scaling = 1;    //图片的缩放比例: 1 为正常大小; 0 会消失,所以不能小于等于 
            // 点击图片放大
            $('.imgitem').each(function(){
                $(this).click(function(){
                    var _this = $(this);    //将当前点击的图片元素作为_this传入函数
                    showBigImg('#outerbox', '#innerbox', '#bigimg', _this)
                })
            })
            function showBigImg(outerbox, innerbox, bigimg, _this) {
                var src = _this.attr('src');    //获取当前点击图片元素的src属性
                $(bigimg).attr('src', src);     //设置#bigimg元素的src属性值
    
                /* 获取当前点击图片的真实大小,并显示弹出层及大图 */
                $(bigimg).attr('src',src).load(function(){
                    var windowW = $(window).width();    //获取当前窗口宽度
                    var windowH = $(window).height();   //获取当前窗口高度
                    var realW = this.width;     //获取图片真实宽度
                    var realH = this.height;    //获取图片真实高度
                    var imgW, imgH;
                    var scale = 0.8;    //当图片的真实宽高大于窗口的宽高时要进行的缩放尺寸
                    if (realH > windowH*scale) {    //判断图片高度
                        imgH = windowH*scale;       //如大于窗口高度,图片高度进行缩放
                        imgW = imgH/realH*realW;    //等比例缩放宽度
                        if (imgW > windowW*scale) { //如宽度仍大于窗口宽度
                            imgW = windowW*scale;   //再对宽度进行缩放
                        }
                    } else if (realW > windowW*scale) { //如图片高度合适,判断图片宽度
                        imgW = windowW*scale;       //图片宽度进行缩放
                        imgH = imgW/realW*realH;    //等比例缩放高度
                    } else {    //如图片真实宽高都符合要求,宽高不变
                        imgW = realW;
                        imgH = realH;
                    }
                    $(bigimg).css('width',imgW);    //以最终的宽度对图片进行缩放
                    var w = (windowW - imgW) / 2;   //计算图片与窗口的左右边距
                    var h = (windowH - imgH) / 2;   //计算图片与窗口的上下边距
                    $(innerbox).css({'top': h, 'left': w});
                    $(outerbox).fadeIn('fast');     //淡入显示
                    $('body').css('overflow-y','hidden');   //隐藏页面滚动条防止滚动缩放图片时影响页面滚动条位置
    
                    // IE9, Chrome, Safari, Opera  -- 鼠标滚动监听       
                    $('#bigimg').on("mousewheel",MouseWheelHandler);         
                    // Firefox	-- 鼠标滚动监听         
                    $('#bigimg').on("DOMMouseScroll",MouseWheelHandler);  
                })
    
                $(outerbox).click(function(){   //再次点击淡出消失弹窗
                    $(this).fadeOut('fast');
    
                    // 解绑 鼠标滚轮监听事件        
                    $('#bigimg').off("mousewheel");         
                    $('#bigimg').off("DOMMouseScroll");
                    // 重置
                    scaling = 1; 
                    $('#bigimg').css('transform','scale(1)');
                    $('body').css('overflow-y','auto');
                })
            }
        
            // 鼠标滚轮放大缩小
            function MouseWheelHandler(event){     
                var type = event.type;   
                if (type == 'DOMMouseScroll' || type == 'mousewheel') {         
                    event.delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta / 120 : -(event.detail || 0) / 3;     
                }     
                
                if (event.delta == 1 || event.delta > 0) { //上滚 -- 放大  
                    zoomImg('#bigimg','add')    
                } else if (event.delta == -1 || event.delta < 0) { //下滚 -- 缩小    
                    zoomImg('#bigimg','cut')         
                } else {         
                    console.log("鼠标滚轮放大缩小状态获取失败") 
                }
            }  
            // 缩放图片比例
            function zoomImg (img,type) {
                if (type == 'add') {    
                    scaling += 0.1;
                } else {
                    if (scaling < 0.5) {   //控制图片缩小到一定大小
                        return
                    }
                    scaling -= 0.1;
                }
                $(img).css('transform',`scale(${scaling})`);
            }
        })
    </script>
    </body>
    </html>
    

    效果如图:

    在这里插入图片描述

    展开全文
  • css怎么设置背景图片大小

    千次阅读 2021-06-10 17:02:49
    我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题,下面我们来看一下使用css设置背景图片大小的方法。css可以使用background-size属性设置背景图片大小,background-size属性规定背景图像的...

    我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题,下面我们来看一下使用css设置背景图片大小的方法。

    0a5c785193aed7b6c57ca6a298191c90.png

    css可以使用background-size属性设置背景图片大小,background-size属性规定背景图像的尺寸。

    语法:background-size: length|percentage|cover|contain;

    属性值:值描述

    length设置背景图像的高度和宽度。

    第一个值设置宽度,第二个值设置高度。

    如果只设置一个值,则第二个值会被设置为 "auto"。

    percentage以父元素的百分比来设置背景图像的宽度和高度。

    第一个值设置宽度,第二个值设置高度。

    如果只设置一个值,则第二个值会被设置为 "auto"。

    cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    背景图像的某些部分也许无法显示在背景定位区域中。

    contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

    示例

    body

    {

    background:url(/i/bg_flower.gif);

    background-size:63px 100px;

    -moz-background-size:63px 100px; /* 老版本的 Firefox */

    background-repeat:no-repeat;

    padding-top:80px;

    }

    上面是缩小的背景图片。

    原始图片:Flowers

    效果图:

    ba15c610ebe4077e357919a4370861be.png

    展开全文
  • CSS实现网页背景图片自适应全屏

    千次阅读 2020-12-19 11:51:38
    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形...
  • 整理于《响应式web设计 HTML5和CSS3实践指南》一书 ...对于上面的图片,我们可以将它所属的div宽度用百分比固定,然后让图片自适应div的宽度和高度.img-wap{ float:left; width:40%; } .img{ ma
  • 网页中按等比例大小显示图片图片不变形
  • 如何改变图片大小-前端入门

    千次阅读 2020-06-30 11:31:21
    我们进行网页设计的时候图片有时候可以会不符合大小,那我们怎么样才能在代码中实现图片大小的改变呢?本篇文章就来给大家介绍关于如何改变图片的大小? 我们改变图片的大小有两种方法:一种是在HTML标签内更改宽度...
  • 我们平时看到的网页啥的,都是有很多图片,比如说我的网站,lemon1234里面就有图片的引入,那么我们是如何引入的呢?我们是使用 img 标签来进行引入的 1. img 标签 先来看看这个 img 标签的用法 <img src=...
  • css如何设置背景图片大小

    千次阅读 2021-06-11 17:45:14
    css如何设置背景图片大小在css中控制插入背景图片的大小用background-size属性。background-size语法:background-size: length|percentage|cover|contain;length用法:(相关课程推荐:css视频教程)background-size:...
  • 干货!Web 网页设计规范

    万次阅读 多人点赞 2020-04-21 14:20:46
    一、网页尺寸 制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。 但是并不代表我们可以在整个画布上作图。 网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的...
  • web网页介绍

    千次阅读 2021-03-29 19:03:56
    web网页 解释:万维网上的一个按照HTML格式组织起来的文件。在通过万维网进行信息查询时,以信息页面的形式出现,它可包括图形、文字、声音和视像等信息。 一、技术总图 二、web组成 一个有具体功能的完整网页,一般...
  • Web安全(图片验证码大小可控导致ddos)

    千次阅读 热门讨论 2021-07-23 10:17:36
    图片验证码大小可控导致ddos 一. 前言: 在网站登录处,通常会有图片验证码.我们知道,Web漏洞的成因都有一个很重要的共同点,那就是外部可控. 比如Sql注入中的Url,用户输入的地方可能会存在XSS等.那么如果图片验证码可...
  • 求大神指导,是不是得用JS? 谢谢了。
  • 我们进行网页设计的时候图片有时候可以会不符合大小,那我们怎么样才能在代码中实现图片大小的改变呢?本篇文章就来给大家介绍关于如何改变图片的大小?我们改变图片的大小有两种方法:一种是在HTML标签内更改宽度和...
  • } div css布局网页如何实现网页自动适应屏幕高度和宽度 css怎么让一张图片适应任何屏幕大小的电脑平铺? 不定义div的宽度,以及父div的宽度即可。 来做一个导航: *{margin:0; padding:0; border:0;} .navbg{...
  • Titlehtml, body {margin:...padding: 0;background: url('images/bg.png') no-repeat fixed;background-size: cover;-moz-background-size: cover;-webkit-background-size: cover;/* IE6-9 */filter: progid:DXIma...
  • 总算明了网页设计如何插入图片

    千次阅读 2021-06-12 05:53:41
    网页设计如何插入图片网页设计如何插入图片?以下就是网页设计如何插入图片等等的介绍,希望为您带来帮助。第一步,先打开我们的网页制作如见,目前比较常用的是Dreamweaver。选择"HTML"。第二步,打开这个软件之后,...
  • 需求:页面一行有固定的4张卡片,每张卡片里有图片图片是从后台系统中上传的,大小不固定,要卡片中的图片高度随着屏幕大小自适应 小屏幕效果: 大屏幕效果: 解决方法有两种: 1. 利用@media媒体查询做。...
  • css设置背景图片大小Introduction: 介绍: As we all know that the images are a very responsive yet very creative way to display your web page or website to the users. The images also play a major role...
  • web实验2 制作简单网页(HTML+CSS)

    万次阅读 多人点赞 2020-08-20 19:45:55
    web实验2 制作简单网页(HTML+CSS) 一、实验目的 1.掌握文本样式的设置。 2.掌握图像样式的设置。 3.掌握各种媒体的插入方法。 二、实验内容 采用DIV+CSS,制作“在线电影”页面。 三、操作提示 1.新建网站的...
  • 网页中控制图片大小

    千次阅读 2012-10-25 15:55:21
    网页中,有时候所引用的图片过大,导致显示的...1.利用css对图片大小进行控制: test img{ border:0; margin:0; padding:0; max-width:1280px; width:expression(this.width>1280?"1280px":this
  • Web前端---响应式室内家具网页设计(HTML+CSS+JS)

    千次阅读 多人点赞 2021-10-26 15:28:29
    网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题。你想要解决的问题,在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、...
  • 图片大小,我们可以直接使用 img 的属性 width、height进行设置 边框我们需要使用 css 样式,我们使用 border 进行设置 可以看到啊,我们这个图片有了一个 1px 宽度的红色实线的边框,solid就是实线,当然...
  • 我们平时开发,后台通过在线编辑器,编辑帖子,上传图片,比如ckeditor配置上传图片,是可以设置图片大小的; 这种设置对pc端的话 也许你设置个 800,600,还是可以的。 但是有没有考虑过移动端呢? 我们发现移动端...
  • photoshop中打开图片,文件--->导出--->存储为Web所用格式 之后

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,605
精华内容 37,842
关键字:

web网页图片大小