이미지에 미디어 쿼리 사용

Question

코드에서 뷰포트 장치 너비를 사용하고 있습니다. 그것은 텍스트와 그림 모두에 대해 휴대폰에서 잘 작동합니다. .img 그와 <img>

포함 된 div에 적용되는

.img { 
    width:100%; 
    height:auto; 
    text-align:center; 
} 

@media screen only and (min-device-width:800px) { 
    .img { 
    width:1000px; 
    height:auto; 
    text-align:center; 
    } 
} 

클래스, 그것은 큰에서 잘 작동 : 문제는 너무 큰 화면에서이 같은 미디어 쿼리를 사용하려고 있도록 사진을 확대한다 지금은 화면이지만 모바일에서는 더 이상 작동하지 않습니다. 텍스트는 여전히 양호하지만 이미지는 이전과 같이 장치 너비에 맞게 조정되지 않습니다 (메타 뷰포트와 비슷 함). 나는 그것을 고치는 법을 모른다. 누군가가 아이디어가있는 경우

,

감사합니다,

Answer 1

또 다른 옵션은 이미지의 최대 폭을 사용하는 것입니다. 이미지가 늘어나고있는 경우 이미지의 최대 크기를 최대로 가져 가고 싶을 것입니다.

.img { 
    max-width: 500px; 
} 

그런 식으로 이미지가 펼쳐집니다.

Answer 2

답변 해 주셔서 감사합니다. 내가 예상했듯이 문제는 나에게서 나왔다. 내 "img"클래스가 img를 포함하는 div에 적용되었습니다.

문제는이 방법으로 너비와 최대 너비가 작동하지 않는다는 것입니다.

방금 ​​.img 클래스를 두 클래스로 분할했습니다. 에 대한 텍스트 정렬 appy를 포함하는 .divimg 및 width 속성을 포함하는 .img는 (이전과 같지 않은)에 적용됩니다.

이제 제대로 작동합니다. 도와 주셔서 감사합니다.