search

Home  >  Q&A  >  body text

css - 如何让html里图片显示原尺寸大小?

新手上路,刚刚才开始学习Web基础,如题,在html文件下的<body>里,插入一幅小图片,72*72的,我的代码如下:

<img src="images/Tuzki.gif"/>

(我的网页在这里http://mitcc.github.io)

为什么图片确是填满了整个屏幕……怎么设置为默认尺寸?顺路问下一般情况下图片格式怎么按比例设为原尺寸的多少倍?

感觉问题挺基础的,Google、Stackoverflow都没有找到解决办法,高手手下留情啊

ringa_leeringa_lee2822 days ago1308

reply all(3)I'll reply

  • PHPz

    PHPz2017-04-17 11:08:39

    <img src="images/Tuzki.gif" width="72" height="72" />
    

    The picture inserted in this way is 72x72 pixels. width represents the width of the picture, and height represents the height of the picture.
    In the future, when you insert pictures into the web page, you can add these elements to control the size of the pictures.
    Also recommended http://www.w3school.com.cn You can check it out, there are explanations on many web pages.

    About scaling

    /* 控制图片比例缩放 */
    .img{max-width:600px;height:auto;}
    

    The above css is to scale the images in the web page according to the proportion. The width should not exceed 600 pixels. If it exceeds, it will be reduced to 600, and the height will be scaled according to the proportion.

    Detailed introduction to max-width attribute
    http://www.w3school.com.cn/css/pr_dim_max-width.asp/css/pr_dim_max-width.asp

    reply
    0
  • 怪我咯

    怪我咯2017-04-17 11:08:39

    Line 257 of the stylesheet.css file sets the width of the image, just remove it

    img {
      width: 100%;  /* 移除这行 */
      max-width: 100%;
    }
    

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:08:39

    Correct answer upstairs
    But if you want to set how many times the original size is, it’s a bit complicated
    1. js get
    2. php function acquisition
    But I think this is not what you want
    If the width and height of the image are not set, the default original size will be displayed.

    reply
    0
  • Cancelreply