Автоматически уменьшать размер свойства CSS - PullRequest
Новая
       0

Автоматически уменьшать размер свойства CSS

0 голосов
/ 05 февраля 2020

У меня есть это изображение с width = "192" и height = "109": 

<a href="https://www.blogger.com/u/1/blogger.g?blogID=4402911157743442948#"><img alt="" class="thumbnail" height="109" src="https://2.bp.blogspot.com/-E5ftfbCCgkw/XjnLpO347cI/AAAAAAAAAE8/85xzQpWk1Q8-8A8le4Zj4zPlzs4xCRIcQCLcBGAsYHQ/s1600/1974%2B-%2BKamen%2BRider%2BAmazon%2BEpis%25C3%25B3dios.jpg" width="192"></a>

, и у меня есть это .playWrapper, которое помещает кнопку воспроизведения поверх изображения. Дело в том, что когда я нахожусь на телефоне или устройстве, которое меняет размер фотографии, ширина .playWrapper остается неизменной, потому что я вижу только один способ - установить его вручную. Я попытался поставить width: auto; , но это не работает. Как это сделать, чтобы ширина .playWrapper соответствовала ширине изображения?

Вот код playWrapper CSS: 

.overlay .playWrapper{opacity:0;position:absolute;z-index:1;top:0;width:192px;height:109px;background:rgba(0,0,0,0.6) url("http://wptf.com/wp-content/uploads/2014/05/play-button.png") no-repeat scroll center center/50px 50px}

Ответы [ 2 ]

0 голосов
/ 05 февраля 2020

Для абсолютно позиционированного элемента, который относится к другому элементу (то есть является родительским элементом), который может изменить размер, часто лучше не использовать значения height и width, а вместо этого использовать top: 0; bottom: 0; left: 0; right: 0;

Если элемент не должен заполнять / закрывать полностью родительский элемент, вы также можете изменить эти значения от 0 до некоторого значения px или, например, использовать его для создания элемента, который охватывает всю (переменную) ширину, но составляет всего 30 пикселей. высоко в нижней части парен: 

.your_overlay_element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
}
0 голосов
/ 05 февраля 2020

Я бы попробовал установить ширину и высоту как изображения, так и playWrapper с процентами вместо пикселей. Например: вместо width:192px; у вас может быть что-то вроде width=10%; в css. Если у вас есть размер экрана, ширина и высота изображения, которое выглядит хорошо, вы можете рассчитать проценты, из-за которых изображение будет выглядеть одинаково на этом размере экрана. Обязательно поместите это на изображение и playWrapper, чтобы они были одинакового размера. Из-за процентов, они будут менять размер с размером экрана. Удачи и, надеюсь, это работает для вас!

...