반응형
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
반응형
'programing tip' 카테고리의 다른 글
CSS 전달 최적화 : CSS 로딩을 연기하는 방법? (0) | 2020.12.12 |
---|---|
persistence.xml에서 JPA 2.1을 지정하는 방법은 무엇입니까? (0) | 2020.12.12 |
Kotlin에서 Mockito를 사용할 수 있습니까? (0) | 2020.12.12 |
자바 스크립트 콜백 범위 (0) | 2020.12.12 |
std :: vector.clear ()는 각 요소에서 (사용 가능한 메모리)를 삭제합니까? (0) | 2020.12.12 |