css - 如何让html里图片显示原尺寸大小?
ringa_lee
ringa_lee 2017-04-17 11:06:39
0
3
1256

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

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

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

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

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

ringa_lee
ringa_lee

ringa_lee

reply all(3)
PHPzhong
<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

刘奇

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

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

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.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template