programing tip

CSS 이미지 최대 너비를 원본 이미지 크기로 설정 하시겠습니까?

itbloger 2020. 12. 12. 10:12
반응형

CSS 이미지 최대 너비를 원본 이미지 크기로 설정 하시겠습니까?


할 수있어? 사용자가 width : 100 %의 컨테이너에 이미지를 업로드하도록하고 있지만 이미지가 원래 크기보다 커지는 것을 원하지 않습니다. 감사합니다!


width이미지를 설정하지 말고 max-width.

img {max-width:100%; height:auto}

(`height : auto는 필요하지 않지만 이미지가 자연스러운 비율을 갖기를 원한다는 것을 스스로 상기시키기 위해 완전성을 위해 여기에 넣었습니다.)

이 바이올린 에는 이미지보다 작은 상자와 큰 상자가 있습니다. 보시다시피 작은 상자의 이미지는 축소되고 큰 상자의 이미지는 정상적인 크기입니다.


이미지 자체의 스타일 태그에서 이미지의 최대 너비를 설정할 수 있습니다. 그런 다음 스타일 시트에서 표시 유형을 "블록"으로 설정하고 너비를 원하는 컨테이너 비율로 설정하고 높이를 자동으로 설정합니다. 그런 다음 margin : 0px auto를 추가하면 완벽하게 중앙에 있어야하며 원래 크기보다 크지 않습니다.

사용자가 업로드 한 이미지이고 예를 들어 PHP를 사용하는 경우 getImageSize ()를 사용하여 이미지 너비를 찾고 이미지에 프로그래밍 방식으로 스타일 태그를 추가합니다.

참고 URL : https://stackoverflow.com/questions/24197730/css-image-max-width-set-to-original-image-size

반응형