절대 위치에있는 css3 적응 형 이미지

매우 간단해야하는 뭔가가 붙어 있습니다. 시맨틱 UI를 사용하는 페이지가 있습니다. 그 페이지에서 200px 너비와 388px 높이의 로고 이미지가 있습니다. 이미지는 절대적으로 왼쪽 상단에 배치됩니다. 시맨틱 UI 클래스는 사용하지 않습니다. 이미지를 화면 크기에 맞게 축소하고자합니다. 나는 min과 max의 높이와 너비로 놀았지만, 이미지의 크기는 전혀 변하지 않을 것입니다.절대 위치에있는 css3 적응 형 이미지

내가 거의 작동하도록 얻은 유일한 방법은 이미지를 div로 바꾸고 이미지를 배경으로 설정하는 것이 었습니다. 나는 그것을 적응 시키지만, 나는 종횡비를 유지할 수 없다. 게다가, 그것은 만족스러운 해결책이 아니다.

다음은 내가 가지고있는 예입니다.

<div class="ui inverted menu">....</div> 
<img src="/img.png" class="logo"> 
<div class="ui page grid">.....</div> 

/* css (separate file) */ 
.logo{ 
    position: absolute; 
    top: 4px; 
    left: 6px; 
    z-index: 2; 
    min-height: 100px; 
    max-height: 388px; 
    width: auto; 
}

이것은 내가 시도한 많은 변형 중 하나이며 아이디어가 부족합니다.

출처

2014-06-11 Ally

가장 좋은 해결책은 이미지를 background-image으로두고 background-size을 cover으로 설정하는 것입니다.

.logo { 
    background-image: url(path/to/your/image.jpg); 
    background-size: cover; 
}

이렇게하면 가로 세로 비율이 유지됩니다.
이미지의 일부가 잘 리지 않게하려면 background-size: contain;을 대신 사용할 수 있습니다.

출처

2014-06-11 23:58:28

감사합니다. 그러나 설명했듯이 이미 배경 이미지로 사용하려고했지만 1) 성공하지 못했습니다. 2) 원하는 방법이 아닙니다. 또한 문제 중 하나는 컨테이너가 클릭 할 수있는 항목을 다루기 때문에 테두리 반경을 추가하여 이미지에 모양을 추가해야한다는 것입니다. 필요하지 않아야하는 어지러운 작업입니다. :) – Ally

문제의 해결책은 object-fit/object-position입니다.

object-fit: contain;

IMG 왼쪽 상단에 배치의 경우 :

object-position: 0 0;

100 % 너비와 높이로 이미지를 스트레칭하는 것을 잊지 마십시오

를

는 사용 img 블록의 가로 세로 비율을 유지하려면

width: 100%; 
height: 100%;

fiddle을 확인하십시오.

caniuse에 따라 IE 6-11, Edge 및 일부 모바일 Android 브라우저에서 object-fit/object-position 속성을 지원하지 않으므로이 변형은 크로스 브라우저에 적합하지 않습니다.

Simon 이전에 말씀 드린 것처럼이 경우에도 background-image을 사용하는 것이 좋습니다.

출처

2017-10-11 13:27:28

절대 위치에있는 css3 적응 형 이미지

답변

관련 문제