增加不同部分标签的图像宽度？

时间：2019-04-05 13:31:03

标签： html css

我目前正在使用网格进行个人项目。在桌面视图中，我需要调整图像宽度的大小以适合所有页面宽度，而不是占据一半。

我需要将图像从this转到此desired outcome，但我自己无法弄清楚。

以下是该问题的代码段：

* {
    box-sizing: border-box;
    cursor: default;
}

html {
    font-size: 16px;
}

html,
body {
    min-height: 100vh;
    margin: 0;

}

::selection {
    background: #000;
    color: #fff;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: Helvetica, sans-serif;
    padding: 1.5rem 0 0 2rem;
    background:#000;
    font-weight: 400;
    line-height: 1.4;
    font-size: 1rem;
    color: #777;
}

a {
    text-decoration: underline;
    color: #777;
}

a[href]:hover {
    cursor: pointer;
    color: #444;
}

h1,
.h1,
h4,
.h4 {
    font-weight: 400;
    margin-top: 0;
    color: #000;
}

h1,
.h1 {
    font-size: 1.5rem;
    color: #fff;
}

h4,
.h4 {
    font-size: 1rem;
    margin: 0 0 .75rem;
    color: #fff;
}

p {
    margin: 0 0 2rem;
}

dd {
    margin: 0;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
    margin: 0 0 .25rem;
}

.shell {
    grid-template-columns: 44rem 15rem 15rem;
    grid-column-gap: 4rem;
    display: grid;
}

.widget {
    margin: 0 0 2.5rem;
}

@media only screen and (max-width: 1024px) {
    .shell {
        grid-template-columns: 24rem;
        grid-template-rows: auto;
        grid-column-gap: 0;
        grid-row-gap: 0;
    }
}

@media only screen and (max-width: 450px) {
    .shell {
        grid-template-columns: 100%;
        padding: 1.5rem 1.25rem 0;
        font-size: 1.0625rem;
    }
    h4,
    .h4 {
        font-size: 1.25rem;
    }
}


.responsive {
  max-width: 100%;
  height: auto;
}
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta content="A product designer and full-stack developer from the UK." name="description">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta property="og:description" content="Studying design and business at Griffith University in tropical Brisbane, Australia.">
    <meta property="og:title" content="Noel Emmanuel">
    <link href="./info_files/style.css" rel="stylesheet">
    <title>NOEL EMMANUEL - INFO</title>
</head>

<body
 class="shell">
    <section>
        <header>
            <h1>Site header</h1></header>
        <p class="h2">a design student in Brisbane, Australia.</p>

    </section>
    <section>
        <dl class="widget"><dt class="h4">Things I can do</dt>
            <dd>Visual Design, Art Direction, Branding, Websites, Event Design, Identity, Naming, Print, Writing, Design Strategy, Social Media & Typography.</dd>
        </dl>
       
        
    </section>
    <section>
        <div class="widget">
            <h4>Contact</h4>
            <ul>
                <li><a href="mailto:email@gmail.com">Email</a></li>
                <li><a href="https://instagram.com/kevin/">Insta</a></li>
            </ul>
        </div>
    </section>

    <section>
        <img class="responsive" src="https://i.ytimg.com/vi/jCwIvz3ezcA/maxresdefault.jpg" alt="image 1" vspace="18">
        <img class="responsive" src="https://i.ytimg.com/vi/jCwIvz3ezcA/maxresdefault.jpg" alt="image 2" vspace="18">
        <img class="responsive" src="https://i.ytimg.com/vi/jCwIvz3ezcA/maxresdefault.jpg" alt="image 3" vspace="18">
    </section>
</body>

</html>

这也是JSFiddle上的问题。

3 个答案:

答案 0 :(得分：0)

是否要为带有图像的部分添加新宽度？

//html
<section id="img-sec">

//css
#img-sec {
  width: 82rem;
}

#my-img {
  width: 40rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

答案 1 :(得分：0)

只需在桌面视图grid-column: span 3;或grid-column: 1 / -1;中将此CSS设置为您的部分即可。

下次，对您的研究进行更全面的了解，您可能已经发现问题的重复部分已经很好地回答了问题：How do I make the first grid item span 100%? 

* {
    box-sizing: border-box;
    cursor: default;
}

html {
    font-size: 16px;
}

html,
body {
    min-height: 100vh;
    margin: 0;

}

::selection {
    background: #000;
    color: #fff;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: Helvetica, sans-serif;
    padding: 1.5rem 0 0 2rem;
    background:#000;
    font-weight: 400;
    line-height: 1.4;
    font-size: 1rem;
    color: #777;
}

a {
    text-decoration: underline;
    color: #777;
}

a[href]:hover {
    cursor: pointer;
    color: #444;
}

h1,
.h1,
h4,
.h4 {
    font-weight: 400;
    margin-top: 0;
    color: #000;
}

h1,
.h1 {
    font-size: 1.5rem;
    color: #fff;
}

h4,
.h4 {
    font-size: 1rem;
    margin: 0 0 .75rem;
    color: #fff;
}

p {
    margin: 0 0 2rem;
}

dd {
    margin: 0;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
    margin: 0 0 .25rem;
}

.shell {
    grid-template-columns: 44rem 15rem 15rem;
    grid-column-gap: 4rem;
    display: grid;
}

.widget {
    margin: 0 0 2.5rem;
}

@media only screen and (max-width: 1024px) {

    section {
        grid-column: span 3;
        /* grid-column: 1 / -1; works as well */
    }

}

@media only screen and (max-width: 1024px) {
    .shell {
        grid-template-columns: 24rem;
        grid-template-rows: auto;
        grid-column-gap: 0;
        grid-row-gap: 0;
    }
}

@media only screen and (max-width: 450px) {
    .shell {
        grid-template-columns: 100%;
        padding: 1.5rem 1.25rem 0;
        font-size: 1.0625rem;
    }
    h4,
    .h4 {
        font-size: 1.25rem;
    }
}


.responsive {
  max-width: 100%;
  height: auto;
}
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta content="A product designer and full-stack developer from the UK." name="description">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta property="og:description" content="Studying design and business at Griffith University in tropical Brisbane, Australia.">
    <meta property="og:title" content="Noel Emmanuel">
    <link href="./info_files/style.css" rel="stylesheet">
    <title>NOEL EMMANUEL - INFO</title>
</head>

<body
 class="shell">
    <section>
        <header>
            <h1>Site header</h1></header>
        <p class="h2">a design student in Brisbane, Australia.</p>

    </section>
    <section>
        <dl class="widget"><dt class="h4">Things I can do</dt>
            <dd>Visual Design, Art Direction, Branding, Websites, Event Design, Identity, Naming, Print, Writing, Design Strategy, Social Media & Typography.</dd>
        </dl>
       
        
    </section>
    <section>
        <div class="widget">
            <h4>Contact</h4>
            <ul>
                <li><a href="mailto:email@gmail.com">Email</a></li>
                <li><a href="https://instagram.com/kevin/">Insta</a></li>
            </ul>
        </div>
    </section>

    <section>
        <img class="responsive" src="https://i.ytimg.com/vi/jCwIvz3ezcA/maxresdefault.jpg" alt="image 1" vspace="18">
        <img class="responsive" src="https://i.ytimg.com/vi/jCwIvz3ezcA/maxresdefault.jpg" alt="image 2" vspace="18">
        <img class="responsive" src="https://i.ytimg.com/vi/jCwIvz3ezcA/maxresdefault.jpg" alt="image 3" vspace="18">
    </section>
</body>

</html>

答案 2 :(得分：0)

在JSFiddle上查看代码，我发现您应该使用以下代码：

#img-section {
    width: 82rem;
    margin: 0 auto;
}

@media only screen and (max-width: 1024px) {
    .shell {
        grid-template-columns: 24rem;
        grid-template-rows: auto;
        grid-column-gap: 0;
        grid-row-gap: 0;
    }

    #img-section {
      width: 24rem;
    }
}
<section id="img-section">
<img class="responsive" src="https://i.ytimg.com/vi/jCwIvz3ezcA/maxresdefault.jpg" alt="image 1" vspace="18">
<img class="responsive" src="https://i.ytimg.com/vi/jCwIvz3ezcA/maxresdefault.jpg" alt="image 2" vspace="18">
<img class="responsive" src="https://i.ytimg.com/vi/jCwIvz3ezcA/maxresdefault.jpg" alt="image 3" vspace="18">
</section>

在这种情况下，您将使用图像部分的所有全宽度：

44rem + 4rem + 15rem + 4rem + 15rem = 82rem

这些是.shell属性上grid-template-columns的值。

希望这就是您要实现的目标。

相关问题
最新问题