호버상의 이미지에 대한 액션 by

-1

나는 CSS에 대해 하나의 질문이 있습니다. 다음은 예제입니다. HTML :호버상의 이미지에 대한 액션 by

<div class="image"></div>

CSS :이 예제에서는 모든 작업 벌금 그래서

.image { 
    width: 250px; 
    height: 250px; 
    background-image: url(image.jpg); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.image:hover { 
    background-size: 120% 120%; 
}

. 이미지 위에 마우스를 올리면 이미지가 확대됩니다. 그러나 나는 이처럼 많은 이미지를 가지고 있으며 모든 이미지 div에 SEO를 사용하는 것이 좋지 않으며 < img> 태그를 사용하려고하지만 "background-size"와 같은 것은 없습니다. img로 그렇게 할 수있는 방법이 있습니까?

출처

2017-10-12 Genjik

에 표시에 해당합니다 당신이 달성하고자하지만 코드에서하지 않는다 또 다른 방법. img 태그를 사용하면 확대/축소 효과에 'scale'속성을 사용할 수 있습니다. –

나는 그것을 시도했지만, 결과는 내가 원하는대로가 아니다. background-size 속성을 사용하면 div의 크기가 변경되지 않고 크기 만 변했지만 크기를 변환하면 크기도 커집니다. – Genjik

제 대답을 참조하십시오. 나는 이것이 당신에게 도움이된다고 생각합니다. –

이 시도 :

.image { 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: 100px; 
 

 
} 
 

 
.image:hover { 
 
    transform: scale(1.5); 
 
}

<img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">

출처

2017-10-12 03:55:35 Ehsan

귀하의 제안에 문제가 내가 이미지에 대한 규모를 사용하면, 내 경우에는 이미지의 특수 치수가 증가합니다 : 250px 및 높이 : 250px; 그러나 나는 같은 차원이되고 싶다. – Genjik

돋보기를 원하십니까? – Ehsan

정확하지 않습니다. 질문 아래의 주석을보십시오. 나는 내가 원하는 것을 설명했다. – Genjik

이를 시도하십시오. 나는 규모의 속성으로했다. 이 조각은 당신을 도와줍니다

.image{ 
 
    display:inline-block; 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.image img{ 
 
    width:auto; 
 
    height:auto; 
 
    max-width:100%; 
 
    max-height:100%; 
 
    -webkit-transition:0.5s; 
 
    transition:0.5s; 
 
} 
 
.image:hover img { 
 
    -webkit-transform:scale(1.1); 
 
    transform:scale(1.1); 
 
}

<div class="image"> 
 
    <img src="https://dummyimage.com/200x200/000/fff" alt="" /> 
 
</div>

출처

2017-10-12 03:58:09

희망.

.image{ 
 
    display:inline-block; 
 
    width:250px; 
 
    height:250px; 
 
    overflow: hidden; 
 
} 
 
.image img{ 
 
    width:100%; 
 
    height:100%; 
 
    transition:all 0.5s ease; 
 
} 
 
.image:hover img { 
 
    transform:scale(1.2); 
 
}

<div class="image"> 
 
    <img src="https://dummyimage.com/250x250/000/fff" alt="" /> 
 
</div>

출처

2017-10-12 04:05:46 PraveenKumar

정말

<div class="image"></div>

예도있다

<div><img class="image" /></div>

출처

2017-10-12 04:09:54 Cons7an7ine

호버상의 이미지에 대한 액션 by

답변

관련 문제