height auto, objectfit contain, objectfit cover

height auto, objectfit contain, objectfit cover

이미지나 비디오가 박스크기에 들어가면서도 가로세로비를 유지하여 찌그러지며 왜곡되는 현상을 방지하기 위해 height auto objectfit contain objectfit cover 을 사용합니다. 이미지나 비디오를 화면에 그리다보시면 원본사진의 사이즈와 콘텐츠가 들어가야하는 박스사이즈가 달라서 찌그러지는 왜곡현상이 발생할 때가 있습니다. 예를 들면 아래와 같은 상황인데 짱구가 위아래로 조금 찌그러져있는 것을 확인할 수 있어요.

3 objectfit cover

cover 대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나간다. 위의 contain과 유사하면서도 콘텐츠 박스를 가득채운다는 점이 다릅니다. 보통 가로세로비가 일치하지 않을때 사용하므로 이미지의 일부가 잘리고, 이미지도 확대된 모습으로 나옵니다. contain과는 다르게 콘텐츠박스를 가득채우면서도 이미지는 확대되며 잘려나간것을 확인할 수 있어요.

이미지의 가로 크기를 100로 하면서 왜곡되지 않게 하려면?

프로젝트를 만들다보시면 이미지가 가로로 100프로를 모두 차지하게 만들어야할때가 있습니다. 일반적인 이미지가 바로 배너입니다. 이런식으로 이미지가 가로로 길게 화면의 100를 차지하고 있지만, 높이는 그것보다. 훨씬 낮습니다. 그렇다고해서 이미지가 찌그러지지도 않았습니다. 이렇게 만들기위해서는 위의 방법들 중 어떤 것을 사용하면 좋을까? ➡️ width를 100%로 주고 height는 주고 싶은만큼 준 뒤, object-fit: cover;를 해줍니다.

width 100height 600pxobjectfit cover이렇게하면 이미지가 조금은 확대되어 나올 수도 있지만, 왜곡현상이 일어나지도 빈공간이 생기지도 않습니다.

사내 전화 예절

전화는 사내에서 업무를 처리하거나 커뮤니케이션을 할 때 수시로 활용하는 도구입니다. 타 팀과의 소통과 협력을 촉진하며 좋은 분위기를 조성하는 데 도움이 되므로 염두에 두어야 합니다. 상대방 번호를 올바르게 입력하여 전화를 잘 못 거는 경우가 없도록 합니다. 전화를 걸거나 받을 때 부서명과 이름을 말하여 자신이 누구인지 밝힌다. 벨이 오래 울리면 다른 사람에게 방해가 되므로 전화가 오면 바로 받는다. 부재중인 사람의 전화가 울릴 경우 당겨 받기로 대신 전화를 받아 담당자가 부재중임을 알려줍니다.

평온한 톤으로 조용하게 말합니다. 급한 경우가 아니라면 식사시간이나 퇴근 후에는 전화하지 않습니다. 용건만 간단하게 대화하며 필요하지 않은 말은 하지 않습니다.

1 height auto

height auto는 말그래도 자동으로 높이를 맞춰준다는 의미입니다. width를 자유롭게 지정하고, height auto로 주면 가로세로의 비율이 찌그러지지 않도록 알아서 height의 길이가 지정됩니다. 위와 같이 너무 정상적으로 사진이 화면에 나오는 것을 확인할 수 있어요. 다른 방법은 원리와 화면에 띄워지는 이미지도 다릅니다.

첫번째 다른 방법들을 이해하기 위해서는 objectfit에 대해 알아야합니다.

나 요소와 같은 의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정 css요소 중 objectfit을 사용하면, 이미지나 비디오와 같은 콘텐츠가 실제로 출력되는 크기와, 콘텐츠박스img태크의 종합적인 width,height 사이의 조정을 다룬다.

img와 backgroundimage를 이해하며 사용하기

인트로에 쓰인 이미지는 이렇게 두가지가 있습니다. 초기에는 img태그를 너무 남발하면 안되며 backgroundimage가 img보다. 더 성능면에서 좋다는 말을 들은 것 같아서 두 이미지 모두 backgroundimage로 작업했었다 하지만 이미지최적화를 진행하면서 img태그는 검색 시 노출되길 원하고 콘텐츠와 큰 관련이 있으며 웹 페이지의 성능을 상승시키고 싶을 때 사용하면 좋고 backgroundimage는 디자인적 요소로만 사용되고 콘텐츠와 큰 관련이 없는 이미지일 때 사용하면 좋다는 것을 알았습니다.

그 이후로 img태그와 backgroundimage는 검색 노출과 성능, 디자인을 고려하여 적절하게 선택해서 사용하고 있습니다.

zwj 내 생각

이미지가 살짝 왜곡되는 것은 사실 기능구현에 어려움을 주거나하는 치명적인 사안은 아닙니다. 하지만 만약 쇼핑몰에 들어갔는데 사진들이 모두 찌그러져 있다면.? 아무리 품질이 좋은 옷이더라도 신뢰성이 확 떨어질 것입니다. 프론트엔드 개발자로서 화면에 보여지는 것도 어느정도 소중하게 여겨야한다고 생각하고, css공부도 지속해서 해나갈 예정입니다.

자주 묻는 질문