카테고리 없음 2020. 8. 18. 03:41

질문

이 코드는 여러 기사에 사용되었으며 스타일 position : relative및 id를 추가하여 기사 내부의 이미지 중 하나에 대해 하나의 특수 스타일을 추가하려고 할 때를 제외하고는 잘 작동한다고 생각합니다. = "target"하지만 이미지 width가 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>

Expand snippet

답변1

절대 위치를 사용하려면 position : absolute 또는 position : relative가있는 상위 container가 있어야합니다.

백분율은 container 블록의 width를 나타냅니다.

    <style>

.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;
  width: 20.66%;
  height:156px;
  margin-right: auto;
  margin-left: 1rem;
  overflow: hidden;
}

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

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

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;
  }
}     
</style>
</head>
    <body>
<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="top: -18px; display: block;position: absolute;" id="target" />
    </div>
  </div>
</div>

여기서 피들 작업

답변2

width가 설정되지 않았기 때문에 .img-control 이 축소됩니다 (width 와 max-width 는 서로 다릅니다).

또한 img #target 은 공백없이 img # target 이어야합니다. img #target 은 "img 요소 내에서 id = 'target'을 가진 요소"를 의미하므로 img # target 은 "id = 'target'을 가진 img 요소"를 의미합니다.

그리고 인라인 스타일을 피하십시오. 그들은 당신과 다른 사람들을 혼란스럽게합니다.

출처 : https://stackoverflow.com/questions/48350101/my-images-disappear-when-using-position-relative-and-absolute

저작자표시 (새창열림)

ABOUT ME

질답창고 질답창고

질문

답변1

답변2

티스토리툴바