目前，我有一段简单的代码，最近我试图从浮动对象移到CSS网格，但是我遇到了一个问题，我的图像无法覆盖整个列的宽度。
有人可以看一下我的HTML和CSS并建议我如何最好地解决我的问题吗？
/* <!------------------------------------------------------------------------------------------------------------
CSS RESET
----------------------------------------------------------------------------------------------------------->*//* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*reset*/
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.content {
grid-area: content;
}
.hero_image {
grid-area: hero_image
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.wrapper {
background-color: #fff;
color: #444;
}
.wrapper {
display: grid;
grid-gap: 1em;
grid-template-areas:
"header"
"sidebar"
"content"
"sidebar2"
"hero_image"
"footer"
}
@media only screen and (min-width: 1101px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 15% auto 15%;
grid-template-areas:
"header header header"
"sidebar content sidebar2"
"hero_image hero_image hero_image"
"footer footer footer";
max-width: 100%;
}
}
@media only screen and (max-width: 1100px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 20% auto ;
grid-template-areas:
"header header"
"sidebar content"
"sidebar2 sidebar2"
"hero_image hero_image"
"footer footer";
max-width: 100%;
}
}
@media only screen and (max-width: 650px) {
.wrapper {
grid-template-columns: 100%;
grid-template-areas:
"header"
"sidebar"
"content"
"sidebar2"
"hero_image"
"footer";
}
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header, .footer {
background-color: #999;
}
.sidebar2 {
background-color: #ccc;
color: #444;
}<!DOCTYPE html>
<html lang="en">
<head>
<!--==========================================================================================================
CHARACTER SET
========================================================================================================== -->
<meta charset="utf-8">
<!--==========================================================================================================
HTML WEB PAGE TITLE - IN TAB BAR
========================================================================================================== -->
<title>Swift Tools</title>
<!--==========================================================================================================
FORCE METADATE/MICRODATA OF WHATS ON THE SITE
========================================================================================================== -->
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<!--==========================================================================================================
CSS LINK
========================================================================================================== -->
<link rel="stylesheet" href="style.css">
<!--==========================================================================================================
RESPONSIVE DESIGN SETTING
========================================================================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div class="wrapper">
<div class="box header">
<header>
<div id="header_h1">
<h1>Swift Tools</h1>
</div>
</header>
</div>
<div class="box sidebar">
<a href="#">Home</a>
<a href="#">Photoshop</a>
<a href="#">Illustrator</a>
<a href="#">About</a>
</div>
<div class="box sidebar2">
<div class="right">
<h2 class="righth2">About</h2>
<p class="rightp">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="box content">
<div class="main">
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div class="box hero_img">
<div class="hero_image">
<img src="images/new-york-4854718_1920.jpg" alt="A photo of downtown newyork in the summer sun" style="max-width:100%;height:auto;" >
</div>
<picture class="main_page_responsive_img">
<source srcset="images/taxi-cab-381233_1920.jpg" media="(max-width: 620px)">
<source srcset="images/statue-of-liberty-267948_1920.jpg" media="(max-width: 1000px)">
<source srcset="images/new-york-city-801867_1920.jpg" media="(min-width: 1001px)">
<source srcset="images/statue-of-liberty-267948_1920.jpg">
<img class="hero_image" src="images/statue-of-liberty-267948_1920.jpg" alt="Statue of Liberty on a sunnyday" style="max-width:100%;height:auto;">
</picture>
</div>
<div class="box footer">
<div class="footer_p">
<p class="right">test test test test</p>
</div>
</div>
</div>
</html>如果您想将图像扩展到其父对象的整个宽度，则可以尝试为图像提供100％的宽度