커뮤니티!
나는 3 개의 분리 된 div 안에 이미지를 중앙에 배치하려고 노력해 왔으며 지금까지 내가 생각 해낸 코드입니다.
$(document).ready(imgresize);
$(window).on('resize',imgresize);
function imgresize() {
var rk = $(".rk").css('width').replace(/[^-\d\.]/g, '');
var img = $("img").css('width').replace(/[^-\d\.]/g, '');
var calc = (img - rk) / 2;
var calc2 = calc - (calc * 2) + 'px';
$("img").css('margin-left', calc2);
}
이미지 래퍼의 현재 너비 (예 : 200px)를 사용합니다. 그런 다음 이미지 자체의 너비 (fe 180px)를 사용합니다.
몇 가지 수학을 수행하고 결국 20px 차이를 내고 나머지 절반은 이미지를 중앙에 맞추기위한 여백 값으로 필요합니다.
이것은 잘 작동하지만 한 가지 문제가 있습니다. 너비가 다른 3 개의 다른 이미지를 얻은 경우이 기능은 이미지 중 하나의 너비 만 사용하고 다른 두 이미지에는 여백이 너무 적거나 너무 많습니다.
HTML은 다음과 같습니다.
<div id="content-wrapper">
<div class="rk">
<img src="img_1.jpg">
</div>
<div class="rk">
<img src="img_2.jpg">
</div>
<div class="rk">
<img src="img_3.jpg">
</div>
</div>
미리 도움을 주셔서 감사합니다! -도마
편집 : 문제의 예 :
내가 정말로 알아야 할 유일한 것은 각 img와 컨테이너에 대한 기능을 분리하는 방법입니다. ".this"와 함께 작동합니까? -죄송합니다. 저는 JQuery / Javascript를 처음 접했습니다. :)
편집 2 : 더 나은 이해를 위해 :
이미지는 컨테이너를 비례 적으로 채워야합니다. 그 지점까지는 문제가 없습니다. 지금 제가하고 싶은 것은 컨테이너 내부의 모든 이미지를 개별 값으로 이동하여 이미지가 모두 수평 중앙에 오도록하는 것입니다. 예를 들면 :
-image container width: 200px
-img1w: 300px
-img2w: 240px
-img3w: 420px
... calculation is: (imgwidth - containerwidth) / 2 ...
img1 would be shifted 50px,
img2 would be shifted 20px,
img3 would be shifted 110px.
foreach를 사용하여 클래스에서 반복합니다. 나는 이것이 당신이 요청한 것입니다
function imgresize() {
$(".rk").each(function (index, data) {
var rk = $(this).width();
var img = $(this).find(">:first-child").width();
var calc = (img - rk) / 2;
var calc2 = calc - (calc * 2) + 'px';
$(this).find(">:first-child").css('margin-left', calc2);
});
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다