이미지 파일이 깨져서 등록되는데 어떻게 손봐야 되나요?ㅠ
관련링크
본문
<style>
#bo_place { width: 100%; padding: 10px; margin:10px 0; float: left; border: 1px solid #DDD; }
#bo_place > b { font-size: 13px; display: inline-block; height: 40px; line-height: 40px; vertical-align: middle; margin: 0 20px; }
#bo_place > .frm_input { margin-left: 10px; }
#mall_item_list { width: 100%; float: left; }
#mall_item_list * { position: relative; }
#mall_item_list > ul { width: 100%; float: left; }
#mall_item_list > ul > li { width: calc(calc(100% - 180px) / 4); float: left; margin-right: 60px; margin-top: 15px; cursor: pointer; margin-bottom: 30px; }
#mall_item_list > ul > li:nth-of-type(4n) { margin-right: 0; }
#mall_item_list > ul > li > .img { width: 100%; float: left; padding-bottom: 66%; overflow: hidden; }
#mall_item_list > ul > li > .img > img { min-width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
#mall_item_list > ul > li > .name { width: 100%; float: left; text-align: center; font-size: 21px; font-weight: bold; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 15px; }
#mall_item_list > ul > li > .point { width: 100%; float: left; text-align: center; font-size: 13px; font-weight: bold; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 10px; }
#mall_item_list > ul > li > .price { width: 100%; float: left; text-align: center; font-size: 14px; font-weight: bold; color: #cb9037; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; }
#mall_item_list > ul > li > .price > span { color: #AAA; }
.noDataArea { border-bottom: 0; }
@media (max-width: 800px){
/* #mall_item_list > ul > li { width: calc(calc(100% - 15px) / 2); margin-right: 15px; }*/
#mall_item_list > ul > li { width: 100%; margin-right: 0; }
/* #mall_item_list > ul > li:nth-of-type(2n) { margin-right: 0; }*/
}
</style>
사진원본을 등록하면 원본을 프레임에 맞게끔 보여지는게 아니라
원본 픽셀이 좀더 초과되거나 하면 화면에 짤려서 부분적인 이미지만 보여져요 어디를 손봐야 될까요?
답변 3
#mall_item_list > ul > li > .img > img { min-width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
위 부분을 아래 처럼 수정해 보세요
#mall_item_list > ul > li > .img > img { width: 100%; height: 100%; object-fit: cover; }
초보분들이 흔히들 착각하는 문제.
대충 여기쯤이겠지 하는 CSS 긁어다 놓고 안된다함.
프레임이 어떤 구조인지 적어도 스샷이나 URL 정도는 있어야 명확한 진단을 내리죠..
그리고 CSS 는 가장 나중에 지정한 스타일만 반영됩니다.
해당 부분이 원인이 아닐수도 있어요..
그러니 꼭 URL 정도는 올리세요.
그리고 컨트롤+쉬프트+C 누르시고 마우스로 해당 부분 찍어보시면 찌그러지는 스타일이
어디에 영향을 받는지 알수 있습니다.
그걸로 내가 원하는 곳이 왜 안되는지 찾아보세요.
1. 초과되는 경우 - 이미지 너비가 절대크기 px로 지정된 경우 발생 가능.
2. 짤리는 경우 - 해당요소가 절대크기 px인데 부모요소애 overflow:hidden 적용된 경우 발생 가능.
3. 수정할 CSS 선택자 찾기 https://homzzang.com/b/css-251
4. 수정한 거 반영시키기 https://homzzang.com/b/css-248
