나는 다음과 같은 링크에 싸여 이미지가 있습니다link 요소 나 그 자식 요소의 img 요소에 CSS 변형 속성을 사용해야합니까?
<a href="#"><img src="/something.jpg></a>
을 그리고 나는 CSS는 그 자체 1.5로 확장 변환을 사용하려고합니다.
<a> 요소 또는 실제 <img> 요소에서 transform 속성을 사용하는 것이 가장 좋은 방법입니까? 또는 그것은 정말로 중요하지 않습니까?
a 태그에 테두리와 같은 몇 가지 스타일이 포함되어있어 맞지 않을 수 있으므로 a 태그로 가고 싶습니다. 아래의 예를 참조하십시오
a{
border: solid 3px green;
display: inline-block;
padding: 4px;
}
img{
display: block;
width: 150px;
height: auto;
}
.scale{
transform-origin: 0 0;
transform: scale(1.2,1.2);
}<a class="scale" href="#">
<img src="https://www.w3schools.com/howto/img_fjords.jpg">
</a>
<br><br><br>
<a href="#">
<img class="scale" src="https://www.w3schools.com/howto/img_fjords.jpg">
</a>그것은 당신이 수행 할 작업에 따라 달라집니다. 앵커에 경계선이 있으므로 이미지와 함께이 앵커를 확대 할 수 있습니다.
그렇지 않으면 오버플로를 설정할 수있는 앵커 내에서 이미지의 크기를 조정할 수 있습니다. 따라서 이미지는 크기가 조정되지만 컨테이너 외부에 표시되지 않으므로 이미지에 줌 효과가 적용됩니다.
그러나 일반적으로 부모 노드를 앵커로 사용하고 이에 대응할 이미지를 설정합니다. 귀하의 CSS에서 상위 - 하위 계층 구조를 따라갈 경우 더 많은 통제력을 갖게됩니다. will-change : transform을 설정할 수도 있습니다. 요소에
에 대한 닫는 따옴표 및 태그를 놓친 것처럼 보입니다. 귀하의 질문에 대한 절대적인 anwser가 없다고 생각합니다. 각 요소 (a 및 img)에 적용되는 요소 및 스타일에 따라 달라집니다. –
이미지의 크기를 조정 하려는데 동적 인 경우 편집기를 사용하여 서버에 새 이미지를 저장하십시오. 벡터 스케일링은 이미지를 실제 크기로 표시하는 것보다 기술적으로 느립니다. 너무 많은 요소가 있기 때문에 문제가 너무 광범위하다는 근거를 던지기 위해 투표했습니다. 우리는 당신이하는 일을 정확히 모릅니다. 따라서 우리는 당신이해야할 일을 모릅니다. – PHPglue