이미지 URL에 대한 링크가있는 게시물의 이미지 크기를 자동으로 조정합니까?

Question

내 커뮤니티 웹 사이트 (포럼, 기사)에서 사용되며 일부 사용자는 매우 큰 이미지를 게시합니다.

나는 (모든 크기를 조정할 이미지) 코드

#post img { 
    max-height: 1000px; 
    max-width: 700px; 
} 

그러나 한 번 더, 내가 원하는 아래 해당 이미지의 URL로 생성 된 링크를 사용하여 이미지를 자동으로 크기를 조정할 수 있습니다. 따라서 방문자가 링크를 클릭하면 이미지 실제 크기를 볼 수 있습니다.

Answer 1

물론이 아닙니다. 당신은 위치를 사용할 수 있습니다 : 절대 이미지 위에 링크를 이동 :

HTML CSS는

#post .img { 
    position: relative; 
} 

#post img { 
    max-height: 1000px; 
    max-width: 700px; 

    position: relative; 
    z-index: 1; 
} 

#post a.full-size { 
    position: absolute; 
    z-index: 2; 

    /* Change this to move the link around */ 
    top: 0px; 
    left: 0px; 
} 

당신이 여분의 <div class="img">을 필요로하는 이유는 그래서 거기에있다

<div class="img"> 
    <img src="your-img.jpg"/> 
    <a href="your-img.jpg" class="full-size">View Full Sized</a> 
</div> 

절대적으로 위치한 링크에 대한 상대 위치 부모. 이로 인해 링크는 문서가 아닌 좌표 시스템으로 부모를 사용합니다.

Answer 2

당신은 HTML로 간단하게이 작업을 수행 할 수 있습니다

<a href='image.jpg'><img src='image.jpg' alt='image'></a> 

사용자가 이미지를 클릭

, 그것은 원래의 전체 크기의 이미지로 이동합니다.