Как центрировать изображения, сохраняя при этом их отзывчивость?

Привет, пожалуйста, взгляните на мой сайт, ниже - это фрагмент кода, о котором идет речь. Мне нужно сосредоточить свои изображения, так как ive никогда не было удачи в методах css-html. Проблема в том, что его набор для ожидания document.ready() иногда поместит все мои изображения вправо. Ive попробовал window.load(), но центр изображений за кадром при меньших размерах окна. Было также предложено:Как центрировать изображения, сохраняя при этом их отзывчивость?

<div style=" 
    background: url('Assets/image.png') center center no-repeat; 
    width: 100%; 
    height: 500px; 
"> 
</div>

, но это заставляет его терять отзывчивость. Я искал вокруг, и я не могу найти решение, мне просто нужно, чтобы мои изображения (и одна форма) оставались центрированными, а изображения уменьшались с размером окна.

сайт: http://bit.ly/11nAQJK

<script type="text/javascript"> //Centering Script 


$(document).ready(function() { 
    updateContainer(); 
    $(window).resize(function() { 
     updateContainer(); 
    }); 
}); 


function updateContainer() { 


(function ($) { 
$.fn.vAlign = function() { 
    return this.each(function(i){ 
    var h = $(this).height(); 
    var oh = $(this).outerHeight(); 
    var mt = (h + (oh - h))/2;  
    $(this).css("margin-top", "-" + mt + "px"); 
    $(this).css("top", "50%"); 
    $(this).css("position", "absolute");  
    }); 
}; 
})(jQuery); 

(function ($) { 
$.fn.hAlign = function() { 
    return this.each(function(i){ 
    var w = $(this).width(); 
    var ow = $(this).outerWidth(); 
    var ml = (w + (ow - w))/2;  
    $(this).css("margin-left", "-" + ml + "px"); 
    $(this).css("left", "50%"); 
    $(this).css("position", "absolute"); 
    }); 
}; 
})(jQuery);

источник

2013-06-08 user2340403

Удалить этот весь сценарий. Поместите это в свой CSS.

img{ 
    display: block; 
    margin: 0 auto; 
}

источник

2013-06-08 22:25:59

Изображения Арент реагирует с этим методом – user2340403

Затем добавить максимальную ширину и высоту авто к изображению. Предыдущий код предназначен для центрирования изображения. –

Да, что другой плакат, но как я могу применить его к форме на моей странице? – user2340403

вобще

<style> 
a{ 
display:block; 
text-align:center; 
} 

</style> 



<a href="Assets/OrderSheet.xls"> 
    <img src="Assets/OrderSheet.png" class="image"> 
</a>

нет необходимости репозиционирования

fiddle

источник

2013-06-08 22:32:53 delueg

Но это закрепит ссылки на моей странице! – user2340403

почему ... что ты имеешь в виду? вы можете дать тегам класс и dou ему нравится a.img_links {display: block; text-align: center;} ... но я видел, что вы смогли управлять этим на своей странице в любом случае – delueg

Нет необходимости в JS, CSS одна отлично. Установите изображение для отображения блока, установите ширину и максимальную ширину плюс маржу.

img { 
display: block; 
width: 300px; 
max-width: 100%; 
margin: 0 auto; 
}

источник

2013-06-08 22:59:03 Vector

Спасибо, что работает! Но как я могу применить его к форме на моей странице (кнопка)? – user2340403

Что делать, если мои изображения имеют ширину более одной ширины? – user2340403

Да, на самом деле это решение не работает вообще, я не могу просто одевать применить ширину к каждому изображению на моей странице. – user2340403

Если вы не примете метод, предложенный другими, я бы предложил использовать em's. Лучше всего использовать их везде, но вы можете просто применить их к своим изображениям.

Затем используйте media queries для увеличения/уменьшения всех элементов со значениями, указанными в em's, путем изменения основания font-size для разных размеров экрана.

источник

2013-06-09 00:24:47 Dom

центр заданного размера элемент отзывчивого

/* element/id/class */ 
/* margin is 100 - width/2 */ 

img { 
width:34%;  
margin: 0 33%; 
}

источник

2013-06-09 01:09:57

Как центрировать изображения, сохраняя при этом их отзывчивость?

ответ

Смежные вопросы