Html 图像比预期宽的网格列

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

header {
  display: grid;
  grid-template-columns: auto 1fr;
  background-color: green;
  padding: 1rem;
}

img {
  width: 50%;
  background-color: pink;
}

div {
  background-color: red;
}

nav {
  background-color: yellow;
  grid-column: span 2;
}

<header>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 324 413.28'%3E%3Crect class='655de5e2-44d3-4b5a-ae63-e6e7ec799246' x='18' y='18.12' width='288' height='324' fill='blue'/%3E%3C/svg%3E">
  <div>
    <h1>Heading</h1>
    <p>Text Line 1</p>
    <p>Text Line 2</p>
    <p>Text Line 3</p>
  </div>
  <nav>
    <a href="#">Menu Item 1</a>
    <a href="#">Menu Item 2</a>
    <a href="#">Menu Item 3</a>
    <a href="#">Menu Item 4</a>
    <a href="#">Menu Item 5</a>
    <a href="#">Menu Item 6</a>
  </nav>
</header>

body {
  margin: 0;
}

header {
  display: grid;
  grid-template-columns: auto 1fr;
  background-color: green;
  padding: 1rem;
}

img {
  display: block;
  background-color: pink;
  grid-column: 1;
  grid-row: 1;
}

div {
  background-color: red;
  grid-column: 2;
  grid-row: 1;
}

nav {
  background-color: yellow;
  grid-column: span 2;
  grid-row: 2;
}

<header>
  <img width="288" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjQgNDEzLjI4Ij48cmVjdCB4PSIxOCIgeT0iMTguMTIiIHdpZHRoPSIyODgiIGhlaWdodD0iMzI0IiBmaWxsPSJibHVlIi8+PC9zdmc+">
  <div>
    <h1>Heading</h1>
    <p>Text Line 1</p>
    <p>Text Line 2</p>
    <p>Text Line 3</p>
  </div>
  <nav>
    <a href="#">Menu Item 1</a>
    <a href="#">Menu Item 2</a>
    <a href="#">Menu Item 3</a>
    <a href="#">Menu Item 4</a>
    <a href="#">Menu Item 5</a>
    <a href="#">Menu Item 6</a>
  </nav>
</header>

Html相关问答推荐

HTML横幅未正确对齐页面顶部

卡片上方的文本

R中的动态Webscraping

为什么在CSS中字段是一个有效的 colored颜色 名称？

如何在Vim中删除Html标签？

如何阻止Chromecast图标出现在HTML5视频

浏览器是在调整大小还是在全屏上交换视频源？

调整一组IMG的大小以适应容器DIV

无法从路径参数获取ID

如何实现与内嵌图像对齐的自动换行？

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

为什么 Flexbox 中相邻元素上的 flex：1 会影响另一个元素的固定宽度？

Tailwind：父母动态适应子元素的身高

您如何动态更改 Vue 中更高级别的标签的 CSS

用于表行组标题的正确 HTML 标记是什么？

使用 R markdown 在 html 中包含图像

两部分问题 - 是什么导致了这个空白？

如何并排放置

和

的定义列表，但如果

变长，

会向下移动？

有没有办法使用 CSS border-radius 创建 HTML 视频标签的三角形显示？

更改包含图标高度的 div