데이터베이스에서 이미지를 가져 와서 div 태그

Question

I에서 이미지를 가져 와서이 이미지를 내부에 넣거나 이미지를 늘리지 않고 div 태그에 넣고 싶습니다. 모든 이미지의 크기가 다르므로 이미지 속성에 width 및 height을 사용할 수 없으므로 이미지를 사용할 때 이미지가 늘어납니다.

<div style="width:300px; height:300px;"> 
    <img src="link.jpg" alt="jet"> 
</div> 

Answer 1

사용이 CSS를

img { 
    max-width:100% 
} 

EXAMPLES

당신이, 당신이 원하는 적절한 크기의 이미지를 얻을 염두에 브라우저 리드에서 이미지를 다시 크기를 유지하지 못할 경우 다음 두 가지 옵션이 있습니다 성능 문제.

Answer 2

시도해보십시오. 이미지의 경우 max-width, 이미지의 경우 width을 자동으로 설정하십시오.

HTML :

<div> 
    <img src="link.jpg" alt="jet"> 
</div> 

CSS : 여기

img 
{ 
    width:auto; 
    max-width:300px; 
} 

가 DEMO입니다.

제대로 작동합니다. 감사

Answer 3

이 시도 :

img 
{ 
    width: 100%; 
    max-width: 300px; 
} 

Answer 4

이미지 태그의 widht과 높이를 지정하고 같은 CSS는 뭔가 사용하지 마십시오 : 최대 300 픽셀의 일정한 폭 들어

및 가변 높이 :

img { 
    width: 300px; 
    max-width: 100%; 
    height: auto; /* needed for some browsers to keep the proportions */ 
} 

상수 높이를 최대 300 픽셀의 변수 폭 : 당신은 이미지가 컨테이너 (컨테이너보다 큰 높이 폭하거나)에 맞게 비례 확장하려면

img { 
    height: 300px; 
    max-height: 100%; 
    width: auto; /* needed for some browsers to keep the proportions */ 
} 

, 당신은 사용할 수 있습니다

img { 
    height: auto; 
    width: auto; 
    max-height: 100%; 
    max-width: 100%; 
    margin: auto; /* optional, to center horizontally/vertically */ 
} 

이렇게하면 최대 300px 너비/높이 및 왜곡되지 않고 이미지를 컨테이너보다 크게 만들 수 있습니다.