Html 我想设置图像的全宽。但如何适应它呢?

Html 我想设置图像的全宽。但如何适应它呢?,html,css,Html,Css,我想覆盖这张图片的全宽尺寸,但它不合适,请帮助如何合适这里是一张图片 这是我的源代码 <html> <head> <title> Select your college from list. </title> <style> #img{ width: 950px; height: 350px; } </s

我想覆盖这张图片的全宽尺寸,但它不合适,请帮助如何合适这里是一张图片

这是我的源代码

<html>
<head>
    <title>
        Select your college from list.
    </title>
    <style>
        #img{
            width: 950px;
            height: 350px;
        }
    </style>
    <body>
    <div id="img">
        <img id="img" src="images/college_name.jpg" alt="Select_your_college"/>
    </div>
    </body>
</head>
</html>
给最小宽度:100%到

首先使用.img img{width:100%}然后

尝试使用css重置:

重置样式表的目标是减少浏览器在默认行高、页眉边距和字体大小等方面的不一致。如果你有兴趣的话,2007年5月的一篇文章讨论了这背后的一般原因。重置样式经常出现在CSS框架中,最初的meyerweb重置也出现在Blueprint中

这里给出的重置样式有意地非常通用。例如,body元素没有任何默认颜色或背景设置。我并不特别建议您在自己的项目中以不变的状态使用它。应该对其进行调整、编辑、扩展和其他调整,以匹配特定的重置基线。为页面、链接等填写您喜欢的颜色

换句话说,这是一个起点,而不是一个不敏感的自足黑匣子。
我认为自己给出了这个答案,我用了这个:

#img{
            width: 102%;
            z-index: 0;
            height: 350px;
            overflow: hidden;
            padding: 0px;
            margin-top: -9px;
            margin-left: -8px;
            margin-right: 9px;
        }
您需要将html和正文的边距和填充重置为零,以使图像与浏览器的首字母相对应

CSS:

HTML:


使用“高度:100%”和“宽度:100%”。。。。这将导致一些失真
body,html{
margin:0;
padding:0;
}

img.fullwidth{
min-width:100%;
}
<html>
    <head>
        <title>Full width Image</title>
    </head>
    <body>
        <img class="fullwidth" src="url/to/your/image.jpg"/>
    </body>
</html>