Невозможно изменить размер фонового изображения в HTML, CSS так, как я хочу - PullRequest
Новая
       0

Невозможно изменить размер фонового изображения в HTML, CSS так, как я хочу

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

Я хотел изменить размер изображения таким образом, чтобы размер изображения изменялся в соответствии с разрешением экрана, на котором оно отображается. Я нашел код, который делает это отлично: 

<!DOCTYPE html>
<head>
<style>
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color : black;
}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}
</style>
</head>
<body>
<img src="kara.jpg" align="right" />
</body>
</html>

В центре этого изображения я хочу воспроизвести видео, но, поскольку это не фоновое изображение, это было невозможно. Но, используя background-image в CSS, я не могу получить тот же эффект, который дает мне вышеизложенное. Я попробовал сочетание многих свойств, таких как background-size, background-position et c. Это просто не дало мне такой же результат. Пожалуйста, помогите!

Ответы [ 2 ]

1 голос
/ 08 февраля 2020

Если вы хотите, чтобы оно занимало точно такую ​​же ширину и высоту изображения, вы можете написать следующее 

<!DOCTYPE html>
<html>
<head>
<style>
html,body {
    height: 100%;
  	width : 100%;
    margin: 0;
    padding: 0;
    background-color : black;
}
.image {
    padding: 0;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
  	background : url(https://via.placeholder.com/150) no-repeat center center;
}
  .image img{
  	opacity : 0;
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
  }
</style>
</head>
<body>
  <div class="image">
    <img src="https://via.placeholder.com/150" />
  </div>
</body>
</html>

иначе вы можете сделать это, используя абсолютную позицию, как показано ниже 

<!DOCTYPE html>
<html>
<head>
<style>
html,body {
    height: 100%;
  	width : 100%;
    margin: 0;
    padding: 0;
    background-color : black;
}
.image {
    padding: 0;
    margin: 0 auto;
    height: 100%;
    width: 100%;
  	position : absolute;
    top : 0px;
    left : 0px;
  	background : url(https://via.placeholder.com/150) no-repeat top center;
}
</style>
</head>
<body>
  <div class="image"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
	padding : 0px;
    margin : 0px;
}
.container{
	width : 100vw;
    height : 100vh;
    position : relative;   
}
.container img{
	width : 100%;
    height : 100%;
    display : block;
    margin : 0px auto;
}
.container video{
	width : auto;
	position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}
</style>
</head>
<body>

<div class="container">
	<img src="https://via.placeholder.com/300" />
    <video width="400" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
	</video>
</div>

</body>
</html>
0 голосов
/ 09 февраля 2020

Я бы предложил обернуть ваше изображение в контейнер, который не ограничивает его, а затем центрировать ваше видео в этом контейнере: 

<style>
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color : black;
}

section {
    padding: 0;
    display: inline-block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
  width: fit-content;
  height: fit-content;
  position: relative;
  padding:0;
}
// I made up the video tag for the example, use what you need
video {
  position: relative;
  display: inline-block;
  width: 800px; // example
  margin: 0 auto;
  height: 500px;. // example
  top: calc(50% - 250px); // 500/2
}
</style>
</head>
<body>
<section>
<img src="kara.jpg" align="right" />
<video />
</section>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...