我想要一个 css 微调器内的图像，并希望它在屏幕尺寸减小时调整大小[关闭]

Question

我想要的只是一个 css 微调器，我可以在其中放置一个图像并调整它的大小，它会变小但无法获得它。 这里是例子http://www.hamsterwheelengineer.xyz/

Answer 1

幸运的是，我很无聊，所以我花了一些时间为你整理。 :) J/K。下一次，向我们展示你迄今为止所做的工作

HTML

  <div class="image">
    <img src="http://www.ymmaa.com/wp-content/uploads/2015/02/logo155.png"/>
    <div class="spin spinner"></div>
  </div>

CSS

.image {
  position: absolute;
}

.image img {
  position: absolute;
  top: 25%;
  left: 26%;
}

.spin {
  position: relative;
  display: inline-block;
  width: 350px;
  height: 350px;
  border: 2px solid #34495e;
  border-radius: 100%;
  animation: spin 0.75s infinite linear;
}

.spin::before,
.spin::after {
  left: -2px;
  top: -2px;
  display: none;
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner,
.spinner::before,
.spinner::after {
  display: inline-block;
  border-color: transparent;
  border-top-color: red;
  animation-duration: 1.2s;
}

.spinner::before {
  transform: rotate(120deg);
}

.spinner::after {
  transform: rotate(240deg);
}

@media (max-width:480px) {
  .spin {
    width: 270px;
    height: 270px;
  }
  .image img {
    position: absolute;
    top: 19%;
    left: 21%;
  }
}

<div class="image">
  <img src="http://www.ymmaa.com/wp-content/uploads/2015/02/logo155.png" />
  <div class="spin spinner"></div>
</div>