Image <a> вертикальный и горизонтальный Align центр и размер с% в обоих

Я пытаюсь создать что-то вроде этого: Image <a> вертикальный и горизонтальный Align центр и размер с% в обоих

Более конкретно у меня есть изображение, которое я хочу быть помещен в середине (по горизонтали & вертикали), а также изображение, подлежащее изменению в соответствии с размером экрана, как на рисунке выше. Проблема и мой вопрос в том, как я могу сделать это изменение размера по высоте и ширине с помощью% и в то же время выровнять их по середине (горизонтально & вертикально), и все это в теге <a>.
Вот код, который я успел написать до сих пор:

<!DOCTYPE html> 
<html> 
<body> 

<a id="demo" style="text-align:center;display:block;vertical-align:middle;" class="btn" href="#Modal"><img src="https://media2.wnyc.org/i/620/372/l/80/1/blackbox.jpeg"></a> 


</body> 
</html>

На самом деле я пытался так много вещей, которые я видел за <img> или <a> выравнивая, но ни один из них не работал со мной. Я думаю, это потому, что у меня есть оба. Я также использую бутстрап. Вы можете мне помочь? Заранее спасибо.

источник

2015-09-13 Asdalud

Необходимо указать значение ширины изображения в%.и якорь в центре от всего пути:

найти fiddle demo

HTML:

<a id="demo" class="btn absoluteCenter" href="#Modal"><img src="https://media2.wnyc.org/i/620/372/l/80/1/blackbox.jpeg"></a>

CSS:

.absoluteCenter{ 
    display:inline-block; 
    position:absolute; 
    text-align:center; 
    top:50%; 
    left:50%; 
    -ms-transform:translate(-50%,-50%); 
    -moz-transform:translate(-50%,-50%); 
    -webkit-transform:translate(-50%,-50%); 
    transform:translate(-50%,-50%);  
} 
.absoluteCenter img{ 
    width:50%; 
}

источник

2015-09-13 08:21:58 locateganesh

Привет, большое вам спасибо за ответ, но изображение меняет размер только тогда, когда я меняю ширину браузера, а не высоту. Можно ли изменить высоту и ширину? Заранее спасибо. – Asdalud

Но высота - авто. Он изменяет размер авто в зависимости от ширины изображения. – locateganesh

Таким образом, мы не можем иметь высоту: 30%; как ширина: 50%; ? – Asdalud

Я думаю, что использование vw and vh units может вам очень помочь (для размеров и полей).

Также обратите внимание на то, что может предложить jQuery.

источник

2015-09-13 08:18:05 cptstarling

Вы должны сделать изображение в качестве фона для якоря

источник

2015-09-13 08:19:57

Если вы хотите, чтобы изображение, чтобы сохранить его коэффициент пропорциональности, и если вы можете использовать Flexbox (поддержку от IE 10 и выше) вы могли бы иметь контейнер .box элемента, который принимает на 100% высоты экрана. Установив justify-content и align-items на номер center, вы центрируете содержимое .box. <a> получает класс .box__centered, который устанавливает ширину на основе .box, а <img> получает класс .box__image, который делает его таким же широким, как родительский элемент <a>.

body { 
 
    margin: 0; 
 
} 
 

 
.box { 
 
    display: flex; 
 
    height: 100vh; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.box__centered { 
 
    width: 25%; /* set the percentual width here */ 
 
} 
 

 
.box__image { 
 
    width: 100%; 
 
    display: block; 
 
}

<div class="box"> 
 
    <a href="#" class="box__centered"> 
 
    <img src="http://placekitten.com/g/321/321" class="box__image" /> 
 
    </a> 
 
</div>

Если вы не можете использовать Flexbox, вы можете поместить в левом верхнем углу .box__centered в центре экрана и использовать transform, чтобы подтолкнуть его вверх и влево немного положить его центр находится в центре экрана.

body { 
 
    margin: 0; 
 
} 
 

 
.box { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
.box__centered { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 25%; /* set the percentual width here */ 
 
} 
 

 
.box__image { 
 
    width: 100%; 
 
    display: block; 
 
}

<div class="box"> 
 
    <a href="#" class="box__centered"> 
 
    <img src="http://placekitten.com/g/321/321" class="box__image" /> 
 
    </a> 
 
</div>

Для обоих методов см Centering in CSS: A Complete Guide статью CSS трюки.

источник

2015-09-13 08:21:51 ckuijjer

Здравствуйте и спасибо большое за ответ, но изменение размера изображения сам, только когда я изменяю ширину браузера, а не высоту. Можно ли изменить высоту и ширину? Заранее спасибо. – Asdalud

Что именно вы хотите? Вы хотите, чтобы изображение сохраняло соотношение сторон, поэтому, когда вы, например, увеличить ширину, чтобы высота также была увеличена? Вы хотите, чтобы изображение всегда входило в окно, так, например, когда высота становится слишком маленькой, изображение также становится меньше? – ckuijjer

Что я хочу: я хочу, чтобы изображение охватывало всегда, например, 30% высоты экрана (без «разрушения» его обычного вида, подобного этому http://visual.merriam-webster.com/images/communications/communications/ typography/set-width.jpg) и быть посередине (вертикально и горизонтально). Извините, если я не разъяснял вам это и не поблагодарил вас за помощь. – Asdalud

Image <a> вертикальный и горизонтальный Align центр и размер с% в обоих

ответ

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