Кнопка воспроизведения с разным размером изображения/видео

Как сохранить кнопку воспроизведения по центру, даже если размер изображения/видео изменился?Кнопка воспроизведения с разным размером изображения/видео

.image{ 
    position:relative; 
    width:500px; //changed 
    height:300px; 
}

Here мой пример ...

Внимание: мои изображения/видео нет не каких-либо конкретных размеров, поэтому они могут меняться в зависимости от их собственного размера ... Это просто пример!

источник

2013-04-03 zppinto

Вы хотите, чтобы ваше изображение, чтобы определить ширину и/или высоту '.image' контейнера, или вы хотите, чтобы изображение вписывается в' '.image', когда .image' указал размеры? Эту проблему можно решить несколькими способами. Можете ли вы рассказать нам больше? –

Я хочу, чтобы изображение вписывалось в '.image'! Однако размеры не указаны в коде css, как это происходит в моем примере. Изображение представлено в соответствии с их собственным размером, поэтому они могут иметь любой размер ... – zppinto

Вы относительно новичок в SO, и я вижу, что вы задали несколько вопросов и получили хорошие ответы. Примите несколько ответов, которые вы говорите, хороши и голосуйте за других, которые вам помогли. Очки репутации - единственный платеж, который мы получаем за помощь друг другу. Спасибо. –

Я создал три примера, чтобы показать, как вы могли бы решить эту проблему.

Пожалуйста, смотрите скрипку: http://jsfiddle.net/audetwebdesign/mxSkQ/

HTML-существу ваш:

<div class ="image ex1"> 
    <a href="#"> 
     <img src="http://placehold.it/200x150" alt="video"> 
     <span class="play"> 
      <span></span> 
     </span> 
    </a> 
</div>

Я использую демо-файл с настраиваемыми размерами, 200x150, например, легко заменить для тестирования.

Пример 1 - Размер изображения определяет размер родительского контейнера

.ex1.image { 
    position: relative; 
    display: inline-block; 
    margin-left: 50px; 
} 

.image a { 
    display: inline-block; 
    position: relative; 
} 

/* Gets rid of the extra white space that follows an inline element*/ 
.image img { 
    vertical-align: bottom; 
}

Если вы хотите .image ДИВ сжиматься, чтобы подогнать изображение, используйте inline-block для отображения. margin-left не является обязательным, зависит от остальной части макета.

Важен: Для центрирования кнопки воспроизведения мотива, просто установите a тег для отображения в качестве inline-block и вашей стрелки-мотив-пролета будет позиционировать себя хорошо.

Поскольку img является встроенным элементом, браузеры вставляют в него небольшое пространство, которое может отображаться, если у вас есть границы или фон. Используйте vertical-align: bottom, чтобы очистить это.

Пример 2 - родительский контейнер имеет заданную ширину

Можно указать ширину для .image родительского контейнера, а затем использовать text-align для позиционирования элемента изображения.

.ex2.image { 
    position: relative; 
    display: inline-block; 
    width: 400px; 
    height: auto; 
    text-align: center; 
}

Пример 3 - родительский контейнер имеет полную ширину и заданную высоту

В этом примере, я позволил родительскому контейнеру заполнить ширину окна и установить высоту 200px. Чтобы получить вертикальное центрирование, я установил margin-top на твердое значение, которое будет зависеть от высоты изображения. Если вы позволите изображению взять фиксированную высоту, этот пример полезен.

источник

2013-04-03 11:51:01

Спасибо за ваше объяснение Марк! Я пытаюсь реализовать его в своем реальном случае, но без успеха, потому что кнопка воспроизведения остается фиксированной в позиции. Можете ли вы взглянуть на него, пожалуйста? Вот это http://jsfiddle.net/dzfsX/2/ – zppinto

Буду рад вам помочь. Ваши изменения заслуживают другого вопроса. Пожалуйста, откройте еще один вопрос и опубликуйте ссылку на новый вопрос. Макет отличается и требует некоторых настроек. Во-первых, принимайте этот ответ с тех пор и голосуйте, если вы этого не сделали. Затем я буду искать ваш новый вопрос и ответить на него. Спасибо. –

Где ссылка на новую тему http://stackoverflow.com/questions/15795057/css-play-button-image-centred-and-on-top-of-video-div-according-to-different-vi Спасибо – zppinto

Дайте изображения CSS в:

display: block; 
margin: 0 auto;

Это просто общий способ вы положили вещи в середине.

Если мне не хватает чего-то, может быть?

источник

2013-04-03 10:43:26 Barney

Это не работает! Если вы попытаетесь изменить размер изображения, кнопка воспроизведения останется в том же положении, и она не «переместится» в соответствии с размером изображения ... – zppinto

Вам нужно

top: 50%; 
left: 50%; 
margin: -25px 0 0 -25px; // top and left equal to half of the size * (-1)

http://jsfiddle.net/nGKcn/13/

Поиграйте с размером изображения/различных изображений.

источник

2013-04-03 10:50:42 Kaloyan

Кнопка воспроизведения с разным размером изображения/видео

ответ

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