9gag.com 에서처럼 이미지의 일부만 표시하는 방법 (이 경우 워터 마크를 숨기는 방법) CSS에서 클립을 사용해 보았지만 이미지가 절대 위치가 필요합니다. 이것은 나를 위해 아니오입니다.9gag.com에서 이미지의 일부를 표시하는 방법
CSS에서이 작업을 수행하는 다른 방법이 있습니까? js도 괜찮습니다.
감사합니다.
///////////////////////////////////////////////////////////////////////////// // 여기 내 문제의 해결책이 날
img {margin:0 auto -33px;}
예, CSS 오버 플로우 속성을 사용 바보, 내가 여백 속성을 사용할 수 있습니다 알아낼 걸 렸어요. overflow: hidden;을 사용하여 엔티티를 컨테이너의 너비와 높이 이상으로 잘라낼 수 있습니다.
W3 스쿨에서 더 많은 정보를 얻을 수 있습니다. http://www.w3schools.com/cssref/pr_pos_overflow.asp 그들은 당신이 시험해 볼 수있는 예조차 가지고 있습니다.
내 웹 사이트는 9gag와 비슷하며 매일 많은 이미지가 포함되어 있으므로 컨테이너의 높이와 너비가 다르기 때문에 내 경우에는 작동하지 않습니다. – user1099029
글쎄, 개별 이미지를 감지하는 스크립트를 작성할 수 있습니다 높이와 폭, 맞지? 그리고'overflow : 숨겨진 '권리로 은폐 할 금액을 계산하시오. – dangerChihuahua007
음, 모든 이미지의 하단에서 정확하게 100 픽셀 위로 이동하고 싶습니다. 그것은 서버에 스트레스를 추가하기 때문에 추가 스크립트를 사용하지 않으려 고 노력하고 있습니다. 광산에는 사용 가능한 메모리가 약 60MB 밖에되지 않습니다. – user1099029
CSS는이 용도로만 필요합니다. HTTP 리소스 요청 (스프라이트라고 함)을 줄이기 위해 여러 사이트에서 사용 된 것과 동일한 기술을 사용합니다.
이미지를 배경 이미지로 설정하여 div를 만듭니다. 그런 다음 div의 원하는 높이와 너비를 설정합니다. 오른쪽 하단을 잘라 내고 싶지 않으면 background-position CSS 속성을 조정할 수 있습니다.
예를 들어 here을 참조하십시오.
네, 스프라이트 사용 방법은 알고 있지만 제 웹 사이트는 9gag와 유사하며 많은 이미지 게시물을 포함하고 있습니다. 매일 더 많이 추가되며이 경우에는 스프라이트를 사용할 수 없습니다. – user1099029
스프라이트를 사용하는 것은 아닙니다. 나는 당신이 이미지의 일부를 덮는 동일한 기술을 사용할 것이라고 말하고 있습니다. –
왜 'position : absolute'을 사용할 수 없습니까? 'position : relative' 컨테이너에 랩핑하면 컨테이너에 절대적으로 적용됩니다. – ThiefMaster
나는 당신이 추천 한대로했는데, 그것은 페이지를 파괴합니다. – user1099029
해결책을 실제 답변으로 게시하십시오. – BoltClock