HTML img 태그 및 메타 뷰포트

현재 meta 태그 뷰포트를 사용하는 반응 형 웹 사이트에서 작업하고 있습니다. 태그를 사용하여로드 한 이미지의 품질이 떨어지는 문제가 발생했습니다. 하지만 대신 background-image을 사용하면 완벽하게로드됩니다.HTML img 태그 및 메타 뷰포트

나는 때문에 SEO 키워드의 img 태그를 사용하고 싶습니다. 품질을 떨어 뜨리지 못하게 할 수있는 방법이 있습니까?

편집 : 체내

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

: 마크 업 헤드 내부

보여주는

<img src='images/logo.png' style='width:65px;height:65px;' />

logo.png 차원이를 65x65 픽셀

어떻게 품질을 잃을까요? 차이점을 캡처 할 수 있습니까? –

모바일 장치의 이미지가 마치 픽셀이 확대 된 것처럼 보이지만 실제로는 너비와 높이가 이미지의 정확한 너비와 높이로 설정됩니다. 예를 들어 이미지 크기가 65x65 인 경우 CSS는 폭 : 65px, 높이 : 65px –

마크 업을 표시하십시오. – meda

당신의 <img>들처럼 그것은 소리 업 그레 이드. 이것은 아마도 다음과 같은 속성 중 하나 이상을 가질 수 어딘가 CSS 규칙에 의해 제어된다 선언 :

img { 
    width: 100%; 
    min-width: 100%; 
    max-width: 100%; 
}

을 즉 단순히 그 속성 선언을 제거하거나 당신은 RPG와 파리를 죽일 수 있고, 그렇다면 시도 :

img { width: auto !important; }

그러나이 방법은 장기적으로 더 많은 슬픔의 원인이 끝날 수 있으며, 가능하면 피해야한다.

2013-08-07 16:34:55

답변