내 응용 프로그램에 너비가 530px 및 높이 : 510px 인 이미지 영역이 있습니다. 해당 영역에 이미지를 배치하고 싶지만 이미지의 크기가 다릅니다. 해당 영역을 채우기 위해 종횡비를 잃지 않고 이미지를 잘라내거나 크기를 조정하는 방법. winjs에서 사용할 수있는 원시 메소드가 있습니까?winjs에서 화면 비율을 잃지 않고 고정 된 높이와 너비로 이미지의 크기를 조정하는 방법은 무엇입니까?
몇 가지 옵션이 있습니다.
하나는 WinJS가 제공하는 ViewBox control을 사용하는 것입니다. ViewBox에는 자식이 하나만있을 수 있으므로 (태그를 자식으로 사용하거나 img가 포함 된 div로 만들 수 있음) CSS 변환을 사용하여 자식을 해당 컨테이너에 맞춰 크기를 조정합니다 (애스펙트를 변경하지 않고). 비율). 꽤 매끄럽다.
또 다른 옵션은 이미지를 컨테이너 (예 : div)의 CSS 배경 이미지 속성으로 설정하고 background-size 속성을 contain으로 설정하는 것입니다. 이렇게하면 이미지가 컨테이너 크기까지 늘어납니다.
마지막으로 옵션이 약간 특수한 경우에 의지해야 할 마지막 옵션은별로 좋지 않습니다. 페이지의 updateLayout 메소드에서 요소를 참조하고 CSS 속성을 명시 적으로 맞출 수 있습니다. 이 시점에서 당신은 레이아웃에 대해 모두 알게 될 것이고 크기 이미지가 무엇인지 알아보기 위해 수학을 쉽게 할 수 있습니다. 여기 내가하는 일 중 일부 프로젝트 코드가 있습니다. 화면의 가로 세로 비율과 가로 세로 세로 크기를 비교하여 화면의 가로 세로 비율을 결정해야합니다. 귀하의 상황 (내가 추측하고있어)와 달리, 내 코드는 이미지가 화면을 채우고 초과가 잘리는 지 확인합니다. 나는 당신이 당신의 img을 포함하기를 원한다고 생각하고 있습니다.
function setImagePosition() {
var img = q(".viewCamera #viewport img");
if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) {
img.style.width = format("{0}px", outerWidth);
img.style.height = "";
img.style.top = format("{0}px", (outerHeight - img.clientHeight)/2);
img.style.left = "0px";
} else {
img.style.width = "";
img.style.height = format("{0}px", outerHeight);
img.style.top = "0px";
img.style.left = format("{0}px", (outerWidth - img.clientWidth)/2);
}
}
희망 하시겠습니까?
HTML 이미지의 크기 조정이란 무엇입니까? 그렇다면 하나, 너비 또는 높이를 설정할 수 있습니다. 어느 것이 든 설정하면 다른 이미지 배율을 유지하고 크기를 유지합니다.
div로 설정된 이미지를 잘 작성해 주셔서 감사합니다. 이 속성은 나를 위해 일했습니다 .item-img { background-size : cover; background-position : center; background-repeat : no-repeat; } –