html/css 图像有时无法加载

Question

在我本地托管的文件网站上，当缩放所有图像时，某些图像有时看起来很奇怪或根本不显示。代码当然只是整体的一小部分。这是它的外观图像:How it should be 这里有时是这样的: How it sometimes is

编辑:重新加载页面时，图像会变得很奇怪或根本不存在。

//CSS代码

.GPU1{

  background-color: #595959;
  border: 2.5px black solid;

  margin-left: -1000px;
  margin-right: 10px;

  transform: translateY(-125%);

  height: 10%;

  width: 500px;
  height: 250px;

  display: flex;
}

.GPU1Pic{
  margin-top: 130px;


  transform: translateX(-340%);
}

.GPU1Name{
  font-size: 25pt;

  color: white;
  text-shadow: 0px 5px 2px black;


  margin-bottom: 150px;
  padding: 2px;
  transform: translateX(+46%);

  align-self: center;
  white-space: nowrap;
}

.GPU1Price{
  font-size: 25pt;

  color: white;
  text-shadow: 0px 5px 2px black;

  margin-top: 200px;

  transform: translateX(-80%);
}

.GPU1Button{

  margin-top: 200px;
  margin-bottom: 20px;


  transform: translateX(-60%);

  border: 0.5px black solid;
  box-shadow: 0px 5px 2px black;

  background-color: gray;
  color: white;

  cursor: pointer;
}

//html代码

   <div class = "GPU1">
      <h1 class = "GPU1Name">AMD Radeon RX 570</h1>
      <h2 class = "GPU1Price">140€-160€</h2>
      <button class = "GPU1Button" onclick="GPU1()" type="button">
         Leistung</button>
     <img class = "GPU1Pic" src="Website Bilder\GPU's\AMD Radeon RX 570.jpg" height="95px" width="150px">
   </div>

Answer 1

有时，当您调整图像大小时，它会被裁剪。你可以尝试做这样的事情:

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

包含的 div 基本上通过 overflow hidden 来裁剪图像。