CSS 코딩의 이미지 문제에 대한 답변

나는 내 웹 사이트 및 표지 이미지를 사용하여 반응이 빠른 작업을 수행하고 있습니다. 하지만 CSS 파일이 아닌 ''태그에 들어가 있습니다. 따라서 반응이 좋은 작업을 수행 할 때 이미지가 맞지 않습니다.CSS 코딩의 이미지 문제에 대한 답변

폭을 100 %로 설정하고 높이를 auto로 설정했습니다. 그러나 그렇더라도 이미지가 제대로 적합하지 않습니다.

위쪽과 아래쪽에 여백이 있습니다. 화면이 좁아서 이미지가 상하부 공간없이 자체 태그에 내재하면 이미지를 확대하고 싶습니다.

출처

2017-05-24 aalicenk

안녕 aalicenk, 당신이 사용하고있는 코드를 포함하고 하나가 실제 이미지를 공유하거나 적어도 이미지 크기가 포함한다면 도움이 될하시기 바랍니다 그래서 우리는 현재 레이아웃을 재현 할 수 있습니다. –

다음과 같이 이미지를 포함해야합니다. background-image : url (image.png); 높이와 너비를 추가 한 다음 확대/축소 등의 배경 속성을 사용하십시오. https://www.w3schools.com/css/css_background.asp – Giedrius

안녕하세요. 늦게 답변 드리게되어 죄송합니다. 실제 이미지 크기는 1140x450입니다. 나는 그 코드를 img : height : auto; 직위 : 절대; 최대 폭 : 100 %. 이 코드는 화면이 좁아지면 반응 형이지만 정상 및 바닥 공간에서 정상적으로 작동합니다. 나의 img를 사용하는 것이 가능할 것입니다. 그래서 나는 CSS 파일에서 사용하지 않는다. ı CSS 코드를 시도 할 때 그런 일이 발생합니다. 그러나 나는 이것을 원하지 않는다. img에서 HTML 태그에 사용하고 싶습니다. 나는이 문제에 관해 매우 답을 찾고 있지만, 찾을 수 없다. 내 영어가 약해서 ı 캔트가 내 문제를 말해 준다면. 시간 내 줘서 고마워. – aalicenk

이 코드를 시도해야합니다. 내가 이해했다면, 당신이하려고하는 것입니다.

이미지 높이 만들기 : 100 % (용기의 전체 높이 덮기); width : 이미지의 가로 세로 비율을 유지하고 이미지의 중앙을 맞추려면 auto를 사용합니다.

는 니펫을 참조하거나 jsFiddle

.container { 
 
    height:700px; 
 
    width:100%; 
 
    position:relative; 
 
    background:red; 
 
    overflow:hidden; 
 
}

<div class="container"> 
 
<img src="http://lorempixel.com/1140/450/" height="100%" width="auto" style="position:absolute;left:50%;transform:translateX(-50%)"/> 
 
</div>

출처

2017-05-25 10:44:28

친애하는 친구 감사합니다. 나는 당신이 준 참조 예제에 의해 문제를 해결했다. 문제는 작은 코드로 해결되었습니다. 그 코드를 사용하고 있습니다 :'code' style = "transform : scale (X, Y);" 'code'. 이런 방식으로 이미지를 확대 할 수 있습니다. 반응 형 작업을 할 때 이미지가 축소됩니다. 여러분 모두 감사합니다. – aalicenk

이 답변이 도움이 될만한 경우 받아 들인대로 그것을 평가하십시오. 고마워 –

CSS 코딩의 이미지 문제에 대한 답변

답변

관련 문제