Мои изображения исчезают при использовании относительного и абсолютного положения

спросил: 26 декабря 2017 в 08:15 в: javascript

У меня этот код используется для нескольких статей и его работы отлично, я думаю, за исключением случаев, когда я пытаюсь добавить один специальный стиль для одного из изображений внутри статьи, добавив стиль position: relative и id="target", но тогда ширина изображения уменьшается до 0 или исчезает, я не могу сказать, какую ошибку я сделал здесь. пожалуйста, сообщите нам.

попробуйте удалить position: relative и id="target" и посмотреть, как работает код.

даже есть лучший подход к достижению эта концепция с использованием jQuery или JS, пожалуйста, поделитесь ею.

.article {
  border: 1px solid red;
  padding: 0;
  display: flex;
}
 
.article-content {
  border: 1px solid black;
  width: 46.66%;
  text-align: left;
  align-self: center;
  margin-left: auto;
}

.img-control {
  border:1px solid black;
  max-width: 53.66%;
  margin-right: auto;
  margin-left: 1rem;
  overflow: hidden;
}

.image {
  width: auto;
  width:100%;
}

.img-control img {
  display: block;
  max-width: 100%;
  width: auto;
}

img #target {
  transform: scale(2.2) translate(-35%, 29%) rotate(-25deg);
  width: 670px;
  display: block;
  position: absolute;
}

@media only screen and (max-width:480px) {
  .article {
    flex-flow: wrap column;
  }
  .article-content, .img-control {
    margin: 0 auto;
  }
} 

<div class="article">
  <div class="article-content">
    <h3 class="mainTitle">What is Lorem Ipsum?</h3>
    <h5 class="subTitle">Lorem Ipsum</h5>
    <p> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
  </div>
  <div class="img-control" style="position: relative;">
    <div class="image">
      <img src="http://via.placeholder.com/466x585" width="100%" alt="" style="width: 670px;right: -48px;top: -18px; display: block;position: absolute;" id="target" />
    </div>
  </div>
</div>

0 ответов