精华内容
下载资源
问答
  • 设置图片宽高一样大

    千次阅读 2018-05-05 21:51:39
    在移动设备上,我们常常需要将一张图片的宽度设为屏幕的宽度,同时将图片的高度设置和图片的宽度一样大,下面讲讲用css如何设置。 html如下 <div class="imageHeader"> <img ...

    在移动设备上,我们常常需要将一张图片的宽度设为屏幕的宽度,同时将图片的高度设置成和图片的宽度一样大,下面讲讲用css如何设置。

    html如下

            <div class="imageHeader">
              <img :src="food.image">
            </div>

    css如下(这里用了styleus语法书写)

     .imageHeader
          position:relative
          width: 100%
          height:0
          padding-top:100%  /*相对于这个盒子的宽度设置的,其值=width*/
          img
            position:absolute
            top:0
            left:0
            width: 100%
            height:100%
    

    1、首先设置父容器.imageHeader的position:relative,width:100%,同时设置height:0,关键是padding-top:100%或者设置padding-bottom:100%这样设置的效果是.imageHeader这个盒子的padding-top/padding-bottom的值是等于.imageHeader这个盒子的宽度的,这样就把父元素的宽度和高度设置成一样大了

    2、然后设置子元素<img>的position:absolute,top:0,left:0,width:100%,height:100%

    经过上述操作,就可以在移动设备上将图片的长宽设置成一样了,并且宽度为移动设备的宽度,效果图如下所示:

     

     

     

    展开全文
  • css 设置图片宽高无效

    2016-12-30 01:14:18
    无论是在body里设置背景图片的wwidth,height。还是在div里设置背景图片的width,height。显示不了全屏,只能显示这张图片原来的大小。该怎么解决这个问题呢?
  • 微信小程序背景图片设置图片自适应宽高 我们在开发过程中经常需要对一些元素设置图片为背景图片。网络图片:.ServiceCenter{ width: 100vw;height: 40vw;margin-top:0.5vw ;background: url('...

    微信小程序背景图片设置和图片自适应宽高


            我们在开发过程中经常需要对一些元素设置图片为背景图片。


    网络图片:

    .ServiceCenter{
      width: 100vw;height: 40vw;margin-top:0.5vw ;background: url('http://www.hirelaxpalace.com/ddpk/image/ddpkxiaochengxuimg/serviceCenter01.png');
       background-size:100% 100%;
        -moz-background-size:100% 100%;
    }

    本地图片:

    .ServiceCenter{
      width: 100vw;height: 40vw;margin-top:0.5vw ;background: url('../../images/ddpkxiaochengxuimg/serviceCenter01.png');
       background-size:100% 100%;
        -moz-background-size:100% 100%;
    }

    在微信小程序开发环境中,用第二种方法,会报错


    用第一种方法,输入网络图片地址,不会报错。




    展开全文
  • html设置图片宽高

    万次阅读 2018-10-12 06:32:03
    ...  img标签自带的属性:widthheight;   例如: &lt;img src='图片地址' width:150; heght:150;... 注意:通过img标签自带属性设置宽高不需要加单位,默认是px;... 通过css样式进行设置图片的...

     

    一、HTML标签内控制宽度高度 

          img标签自带的属性:width和height;   

          例如:    <img src='图片地址' width:150; heght:150; />

          注意:通过img标签自带属性设置宽高不需要加单位,默认是px;

    二、CSS样式控制width、height 

          通过css样式进行设置图片的宽高,样式名依旧是:width和height

          例如:

                <style> 

                      #img的id{ width:300px; height:100px} 

                </style> 

          注意:通过css设置宽高需要写单位,不要忘了!

     

    三、扩展知识:
           CSS类命名+空格+标签 或者 CSS类命名+空格+CSS命名+空格+CSS命名这样表达式DIVCSS5叫CSS指针

     

    原文地址:http://www.divcss5.com/wenji/w408.shtml      

     

    展开全文
  • css设置图片固定宽高,按比例缩放

    千次阅读 2020-05-17 11:14:12
    设置图片固定宽高,按比例缩放 <style> .setimage { overflow: hidden; position: relative; width: 1045px; //图片固定宽度 height: 433px; //图片固定高度度 background: black; } .setimage &...

    设置图片固定宽高,按比例缩放

     <style>
    .setimage {
                overflow: hidden;   
                position: relative;
                width: 400px;  //图片固定宽度
                height: 300px;   //图片固定高度度
                background: black;
            }
    
                .setimage > img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
    
            /*top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置
            translate(-50%,-50%) 作用是,往上(x轴), 左(y轴)移动自身长宽的 50%,以使其居于中心位置
            */
    
    </style>
    
    
    
    <div class="setimage">
          <a href="#" class="image featured"><img src=@w.Image alt="" /></a>
    </div>

     

    展开全文
  • 说明:在当前位置插入图片。 格式: (1)public Shape InsertImage(string fileName); (2)public Shape InsertImage(Image image); (3)public Shape InsertImage(string fileName, double width, double...
  • 用了很久的Glide,最近在使用Glide3时突然想到一个问题,大家都知道使用Glide的override方法可以重写...//Glide的override()方法设置图片大小 Glide.with(this).load(R.mipmap.mantou).override(500, 500).into(i...
  • 微信小程序wxParse插件图片宽高自定义设置优化

    千次阅读 热门讨论 2018-07-13 17:11:44
    微信小程序wxParse插件图片宽高自定义设置优化 描述: 在使用wxParse(version 0.3)微信小程序插件过程中,当原文内容包含图片时,wxParse对图片的转换将通过wxml中image标签的bindload事件获取图片的存储本身的...
  • 之前用layui 富文本编辑器的时候,上传较大的图片时,图片显示不全,而且编辑起来非常的不便,这样的用户体验是非常不好的,想了好久没想出办法, 1.找到layedi.js 文件 路径:layui/lay/modules/layedit.js,如下图...
  • 图片宽高设置及使用老是记不住,今天来总结一下,方便以后使用。我们今天用到的图片如下(原始尺寸:500*375): 首先,我们说说&lt;img&gt;这个元素。它是一个行内元素,自带widthheight属性。width...
  • ayout中设置图片自适应大小,并且设置最大宽高,当图片的宽高大于设置的最大值时,宽高值为设置的最大值。  Java代码  "@+id/image_view"   android:layout_width="wrap_content"   ...
  • css图片宽高相等设置

    千次阅读 2019-03-21 16:10:30
    亲测有效。转载:https://www.cnblogs.com/yesyes/p/6686719.html <style> .image-header{ position:relative; width:100%; height:0; padding-top:100%; } .image-header img{ ... top...
  • Glide 动态设置图片宽高的解决办法

    万次阅读 2017-03-03 11:20:22
    1、整体思路就是通过获取平路的宽度,通过服务器图片宽高比,我们服务器的是16:9,所以设置的是1.78 2、最后把宽高给imageView去展示 3、如果觉得这个宽高比不适合,也可以在方法多加一个参数就可以了,通过...
  • Android动态设置布局宽高

    万次阅读 2018-11-29 09:35:38
    例如设置一个图片宽高 关键代码: LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) imageView.getLayoutParams(); params.width = dip2px(MainActivity.this, width); params.height = dip2px...
  • vue图片设置好的div里面自动适应宽高图片显示全部,不够宽高的留空白 <div class="rightullidiv"> <img :src="item.pic" alt="" class="rightulliimg"...
  • i、span不显示图片设置宽高不显示

    千次阅读 2015-11-09 16:40:04
    i、span是内联元素,内联元素不可设置宽高,所以设置宽高不显示图片。 解决: 设置display:block;将内联元素转换为块级元素,然后设置宽高,就可以显示了。 css文件中: i{width:18px;height:20px;display:block;...
  • 百度ueditor上传图片设置默认高度

    万次阅读 热门讨论 2015-06-18 17:07:54
    我也是逼了dog了,百度编辑器官方文档其实做的很不详细,都是些基本的用法,想设置个上传图片默认尺寸都找不到相应文档。进过哥的不屑努力,终于是配置好了,其实也是很简单的,加了一行代码。。。。。   ...
  • 1:先获得图片的地址: 访问收手机图库: Intent intent= new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI); startActivityForResult(intent, RESULT_...
  • 设置margin上下和宽高无效,其他有效元素有哪些 1、其他元素都在一行上; 2、高和外边距不可改变; 3、宽度就是它的文字或图片的宽度,不可改变; 4、设置宽度width无效。 5、设置高度height无效,可以通过line-...
  • 需求的时间要求比较急,简单做了一个(基本够用): function setImgWidthHeight(){ var maxwidth = 800; var maxheight = 800; var img = new Image(); img.src =$("#imgShow").attr... // 初始化高度宽度 $(
  • UGUI中RectTransform中TopBottom的设置宽和高设置,以及postion锚点的设置 using UnityEngine; using System.Collections; using UnityEngine.UI; /// /// 脚本位置:UGUI的图片 /// public class test :...
  • content:url()中的图片无法设置宽高

    千次阅读 2018-11-22 13:52:23
    项目中遇到 随手记录 ::before ::after等伪类中使用content:url()中的图片无法设置宽高 原文链接 https://blog.csdn.net/sinat_34930640/article/details/78676096
  • css 如何将图片元素设置宽高

    千次阅读 2019-09-18 16:23:38
    <div class="wrapper"> <img src="....."/> </div> <style> .wrapper { position: relative; width: 200px; height: 0; padding-bottom: 75%; } .img { position: absolute;... ...
  • 在开发过程中我发现,有时会遇到明明图片宽高设置的是相同的值,但在运行后图片却并没有显示出相对应的效果,反而看起来宽高非常不成比例,如以下示例: 最终效果: 可以看到,这并不是我们想要的结果,经过我...
  • LZ-Says:技术无极限,领略独特美 前言 古人云:嘴大吞天下。 话说,接到写页面需求后,又发现自己找图,瞬间很是茫然,很是凌乱。...调整图片宽高 下面一起来看。 PS 首战 首先,LZ 使用 PS 版本如下...
  • 在img标签里面只设置宽,不设置高图片就会等比例缩放。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 176,963
精华内容 70,785
关键字:

怎么设置图片的宽和高