代码之家 › 专栏 › 技术社区 › divine forever

最大宽度在css中无法动态更改图像大小?

css html

divine forever · 技术社区 · 4 年前

问题是最大宽度(tm部分img)没有根据浏览器进行缩放。在此之前,我想确保这不是我的浏览器问题,因为我已经检查了不同代码的工作情况及其工作情况。

图像不会根据浏览器而改变。

*{
    margin: 0;
    padding: 0;
}
body{
    background:#ffd633;
    background-color: pink;
}
.tm-header{
    background: #80ffd4;
    padding-bottom: 2px;
}
.tm-main{
    width: 1200px;
    margin: auto;
}
.tm-main::after{
    content: " ";
    display: block;
    clear: both;
}
.tm-main img{
    float: left;
    display: block;
}
.tm-main .tm-nav{
    float: right;
    margin-right: 20px;
}
.tm-main .tm-nav ul li{
    display: inline-block;
    vertical-align: center;
}
.tm-main .tm-nav ul li a{
    color: black;
    font-family: 'Ubuntu', sans-serif;
    text-decoration: none;
    text-transform: capitalize;
    padding-left: 5px;
    padding-right: 15px;
    text-align: center;
    line-height: 74.5px;
}
.tm-main .tm-nav ul li a:hover{
    color: brown;
}
.tm-section img{
    max-width: 100%;
}
.tm-section{
    overflow: hidden;
}
.tm-content{
    font-family: 'IM Fell Great Primer SC', serif;
    font-size: 35px;
    width: 1500px;
}
h1,h2,h3{
    padding-bottom: 15px;
    padding-top: 15px;
}
p{
    padding-bottom: 20px;
    padding-top: 15px;
}

<!DOCTYPE html>
    <html>
    <head>
        <title>css</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC&display=swap" rel="stylesheet">
    </head>

    <body>
        <header class="tm-header">
        <div class="tm-main">
            <img src="logo.png" width="50px" height="auto"> 
            <nav class="tm-nav">
                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">about</a></li>
                    <li><a href="#">services</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </nav>
        </div>
        </header>
        <div class="tm-main tm-content">
            <section class="tm-section">
            <img src="msd.png" alt="" width="100%" height="600px" style="">
            </section>
            <article>
                <h1>This is something about me</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

                </p>
                <h2>My Aim</h2>
                <p></p>
                <h2>conclude</h2>
                <p>

                </p>
            </article>
        </div>
        </header>
    </body>
</html>

1 回复 | 直到 4 年前

David G 4 年前

如果你的容器是tm部分,那么你可以使用以下命令,它将调整大小到它的容器:

tm-section img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

Thanh Thanh 4 年前

%:定义包含块的最大宽度(以百分比表示)。您应该为.tm部分设置宽度

前任:

.tm-section {
  width: 800px;
}

.tm-section img {
  max-width: 100%;
}