放入标签时图像改变大小和位置答案

【问题标题】：Image changing size and position when put in an a tag放入标签时图像改变大小和位置
【发布时间】：2022-01-21 19:46:50
【问题描述】：

我希望这张图片是一个链接。但是当我将 img 标签放在 a 标签中时，图像突然改变了位置和大小，我不明白为什么。整个容器似乎变小了。

这是desired look

这就是happens when the a tag is added

编辑：我更接近于理解问题所在，但仍未找到解决方案。锚标签比它持有的图像大。 Så 图像周围有一个很大的区域，可点击并占用空间。关于如何解决这个问题的任何想法？

Edit2：当我将图像的宽度设置为 px 而不是 % 时，问题似乎解决了，但不知道为什么。

标签中没有img的代码：

<div class="container-background-grey portfolio-presentation-container">
  <p class="portfolio-presentation-text1">
    <a class="longer-text-link" href="index.html"
      >Logo-design, illustrationer och tryckt material för småskalig
      producent av hundhalsband och koppel.</a
    >
  </p>

  <img
    class="portfolio-presentation-image1"
    src="../Images/Linnelur/poster.jpeg"
    alt="Linnelur-poster."
  />
</div>

标签内带有img的代码：

<div class="container-background-grey portfolio-presentation-container">
  <p class="portfolio-presentation-text1">
    <a class="longer-text-link" href="index.html"
      >Logo-design, illustrationer och tryckt material för småskalig
      producent av hundhalsband och koppel.</a
    >
  </p>

  <a href="index.html">
    <img
      class="portfolio-presentation-image1"
      src="../Images/Linnelur/poster.jpeg"
      alt="Linnelur-poster."
    />
  </a>
</div>

CSS：

.portfolio-presentation-container {
          /* FLEXBOX: */
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 20%;
        }

.portfolio-presentation-text1 {
  max-width: 50%;
  padding-left: 5%;
  font-family: "Inter", sans-serif;
  font-size: 15pt;
  font-weight: 400;

  flex: 1 1 50%;
}

.longer-text-link {
  text-decoration: none;
  color: black;
  font-family: "Inter", sans-serif;
  font-size: 15pt;
}

.portfolio-presentation-image1 {
  /* background-color: darkgoldenrod; */
  max-width: 20%;
  padding: 10%;
}

【问题讨论】：

只需将它们两个（文本和图像）放在不同的<div> 中，并在父级<div> 中应用justify-content:center
不幸的是问题仍然存在......

标签： css image flexbox href image-size

【解决方案1】：

这就是你想要达到的目标吗！

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: #bbdefb;
  padding: 15px;
  gap: 5px;
}

.text-container {
  flex: 0.3;
  padding: 0 2rem;
  font-size: 20px;
  font-weight: 600;
}

.image-conatiner {
  text-align: right;
  flex: 0.8;
}

.image-conatiner img {
  height: 300px;
}

.link {
  text-decoration: none;
}

<div class="container">

  <div class="text-container">
    <a class="link" href="index.html">Logo-design, illustrationer och tryckt material för småskalig
          producent av hundhalsband och koppel.</a>
  </div>

  <div class="image-conatiner">
    <a href="index.html">
      <img class="portfolio-presentation-image1" src="https://images-na.ssl-images-amazon.com/images/I/51p6Vj65vxS._SX301_BO1,204,203,200_.jpg" alt="Linnelur-poster." /></a>
  </div>

【讨论】：