2
div에 이미지의보기 포트 역할을합니다. div가 마우스의 너비를 늘리고 내부의 이미지가 움직이지 않고 중심에 머물러 있기를 바랍니다. 다음 코드는 정확히 내가 원하는 수행합니다부모의 너비에 애니메이션을 적용하면서 이미지를 가운데에 맞 춥니 다?
HTML & CSS
.image {
width: 10%;
background: transparent center center;
height: 200px;
transition: width 2s cubic-bezier(.15, .88, 0, .99);
-o-transition: width 2s cubic-bezier(.15, .88, 0, .99);
-ms-transition: width 2s cubic-bezier(.15, .88, 0, .99);
-moz-transition: width 2s cubic-bezier(.15, .88, 0, .99);
-webkit-transition: width 2s cubic-bezier(.15, .88, 0, .99);
}
.image:hover {
width: 70%;
}<div class="image" style="background-image:url(http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg);"></div>는 스타일 속성에 이미지 URL을 가하고에 대해 내가 좋아하지 않는 유일한 것은. 나도 같은 효과를 달성하기 위해 CSS 코드를 사용하여 시도
HTML
<div class="image2">
<img src="http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg" />
</div>
:
.image2 {
position: relative;
width: 10%;
height: 200px;
overflow: hidden;
transition: width 2s cubic-bezier(.15, .88, 0, .99);
-o-transition: width 2s cubic-bezier(.15, .88, 0, .99);
-ms-transition: width 2s cubic-bezier(.15, .88, 0, .99);
-moz-transition: width 2s cubic-bezier(.15, .88, 0, .99);
-webkit-transition: width 2s cubic-bezier(.15, .88, 0, .99);
}
.image2:hover {
width: 70%;
}
.image2 img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="image2">
<img src="http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg" />
</div>을하지만이처럼 보이기까지 내 HTML 마크를 선호 이 문제는 Windows 10의 Chrome에서 이미지에 약간의 충격이 발생한다는 것입니다 (적어도 내 컴퓨터에서는). div가 너비가 축소되어있는 동안 div 너비가 img 너비와 같은 시간 전후에는 잠깐 졸졸 듭니다. 이 충격적인 효과를 제거하려면 어떻게해야합니까? Edge 브라우저에서는 발생하지 않습니다.
CSS를 작성하는 더 좋은 방법이있어서 처음 접근 방식과 똑같이 동작합니까?
꽤 크롬 특정 문제가, 아니면 웹킷입니다입니까? 이러한 고르지 못한 전환을 표시하는 유일한 브라우저로 보입니다. – Serlite
@Serlite는 HTML 마크 업을 기반으로 다른 CSS 구현을 생각할 수 있는지 알려주시겠습니까? 나는 그들의 인터페이스에서 최고의 품질을 기대하는 고객과 함께 일하고 있습니다. 또한 WCAG를 준수하도록 노력 중이므로 의미있는 마크 업이 좋을 것입니다. 이론적으로 Javascript를 사용하여 이미지 src 특성을 div 스타일 특성으로 복사 할 수 있지만 bandaids를 피하는 것이 좋습니다. – John
필자가 본 유일한 옵션은 3d transform (translate3d (-50 %, -50 %, 0);)을 구현하여 하드웨어 가속을 강제하는 것입니다. – Daniel