时间戳

首页 > 解决方案 > html/css 图片有时无法加载

html - html/css 图片有时无法加载

问题描述

在我本地托管的文件网站上，当缩放所有图像再次起作用时，某些图像有时看起来很奇怪或根本不出现。代码当然只是整体的一小部分。这是它应该如何看待的图像： 它应该是如何 以及这里有时是 如何的：有时它是如何

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

//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€&lt;/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>

标签： htmlcsswindowsimage

解决方案

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

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

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

包含 div 基本上通过隐藏溢出来裁剪图像。

推荐阅读