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

【问题标题】：Increasing image width across different section tags?增加不同部分标签的图像宽度？
【发布时间】：2019-04-05 13:31:02
【问题描述】：

我目前正在将网格用于个人项目。我需要帮助在桌面视图中调整图像宽度以适应所有页面宽度，而不是占一半。

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

这是问题的代码 sn-p ：

* {
    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 的问题。

【问题讨论】：

标签： html css

【解决方案1】：

为带有图像的部分添加新宽度不是一个选项吗？

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

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

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

【讨论】：

它可以工作，但我需要将图像居中。因为右边有多余的空间。
如果 img 不是 100% 宽度，那么您可以使用 #img { display: block; margin-left: auto; margin-right: auto; width: 40rem; } 将其居中

【解决方案2】：

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

下次，对你的研究进行更彻底的研究，你可能已经找到了你的问题的这个副本，它已经很好地回答了它：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>

【讨论】：

【解决方案3】：

查看您在 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 属性上的值。

希望这就是你的目标。

【讨论】：