Проблема с оверлеем в Bootstrap - PullRequest
1 голос
/ 21 марта 2020

Я тренируюсь, чтобы сделать отзывчивый сайт с bootstrap. Пока все хорошо, даже если я представляю, что мой код не очень чистый. Беспокойство, которое беспокоило меня в течение нескольких часов, заключается в том, что я не могу наложить изображение.

В любом случае, мне не удается сделать это наложение соответствующим размеру изображения, а не размеру <div>, в котором находится это наложение.

Я упростил свой случай, чтобы облегчить его настройку.

Итак, у меня проблема с переполнением фрейма: фон (синим цветом внизу) на изображении ниже) это размер <div> и <row>, но не размер изображения. Само изображение автоматически имеет 25px отступов сверху, 15px справа и столько же слева.

С другой стороны, у моего фона вообще нет этих отступов, и нет необходимости говорить, что добавление отступов на мой div ничего не меняет. Я просто не могу сделать этот размер правильного размера. Или, скорее, размер, который соответствует размеру моего изображения, чьи отступы, по-видимому, свойственны функционированию bootstrap ...

Вот как это выглядит визуально с консолью Firefox, которая показывает отступ и размер div.

Что у меня на картинке

Код ниже:

http://jsfiddle.net/o9vjn3bm/

@media (min-width: 576px) {
  .container-fluid {
    width: 540px;/*Pour les très petits écrans.*/
  }
}
@media (min-width: 768px) {
  .container-fluid {
    width: 720px; /*Pour les petits écrans*/
  }
}
@media (min-width: 1200px) {
  .container-fluid {
    width: 1200px;/*Pour les écrans moyens*/
  }
}
@media (min-width: 1920px) {
  .container-fluid {
    width: 1900px;/*Pour les grands écrans*/
  }
}
html,body {
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
/*MENUS DU HAUT*/
nav > div > div[class*="menu-haut"] {
  background-color: black;
  line-height: 40px;
  text-align: center;
}

nav > div > div > a {
  color: white;
  text-transform: uppercase;
}

nav > div > div > a:hover {
    color: white;
    text-transform: uppercase;
}

.dessins {
    border-right: 1px solid white;
    border-radius: 10px 10px 0px 0px;
}
.dessins:hover {
  background: rgba(0,0,0,1) url("images/separateur.png") no-repeat bottom;
}

.videos {
    border-radius: 10px 10px 10px 10px;
    border-right: 1px solid white;
    border-left: 1px solid white;
}

.videos:hover {
  background: rgba(0,0,0,1) url("images/separateur.png") no-repeat bottom;
}
.cv {
    border-radius: 10px 10px 10px 10px;
    border-left: 1px solid white;
}
.cv:hover {
  background: rgba(0,0,0,1) url("images/separateur.png") no-repeat bottom;
}

/*MENUS DU BAS*/
nav > div > div[class*="menu-dessins"] {
    border-top : 2px solid white;
    background-color: black;
    line-height: 40px;
    text-align: center;
}

.nb {
    border-radius: 0px 0px 0px 10px;
    border-right : 1px solid white;
}

.couleurs {
    border-radius: 0px 10px 10px 0px;
    border-left : 1px solid white;
}
.col-xl-4
 {
   padding-left: 15px;
 }

/*SECTION DESSINS*/

.fit-image{
  width: 100%;
  object-fit: contain;
  border-radius: 10px 10px 10px 10px;
}
.overlay {

  position: absolute;
  bottom: 0%;
  left: 50%;
  background: blue;
  height: 15%;
  width: 100%;
  opacity: 0.5;
}
.ctr {
  transform: translate(-50%, 0%);
  text-align: center;
}

.content:hover{
  opacity : 1;
}

.reve {
  padding-top: 25px;
  padding-right : 10px;
  max-width: 100%;

}
.amour {
  padding-top: 25px;
  padding-left:10px;
  padding-right: 10px;
  max-width: 100%;
}
.charogne {
  padding-top: 25px;
  padding-left : 10px;
  max-width: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" lang="fr"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Batche - Dessins</title>
		<link rel="stylesheet" href="style_batche_1_dessins.css" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>

<body>
	<header> <!--Je place mon menu dans le header-->
		<div class="container-fluid">
			<div class="row">
			
				<nav class="col-12 menus .bg-dark"> <!-- Menus -->
					
					<div class="nav">
			 
					<div class="menu-haut col-4 nav-item dessins">
					
					<a class="nav-link active" href="site_batche_dessins.html">Dessins</a>
					</div>
  
					<div class="menu-haut col-4 nav-item videos">
					<a class="nav-link active" href="site_batche_videos.html">Vidéos</a>
					</div>
  
					<div class="menu-haut col-4 nav-item cv">
					<a class="nav-link" href="site_batche_cv.html">Cv</a>
					</div>

					</div>
				</nav>
			</div>
		</div>
	</header>

	<section>
		<div class="container-fluid">
			<div class="row">
				<nav class="col-12">
				
					<div class="nav">
			 
					<div class="menu-dessins col-6 nav-item nb">
					<a class="nav-link active" href="#noir_blanc">Noir & Blanc</a>
					</div>
  
					<div class="menu-dessins col-6 nav-item couleurs">
					<a class="nav-link" href="#couleurs">Couleur</a>
					</div>
					
					</div>
				</nav>
			</div>
		</div>		
	</section>

	<section id="Le_reve">
		<div class="container-fluid">
			<div class="row">

				<div class=" wrapper reve col-xl-4 col-lg-6 col-md-12 col-sm-12">
					<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.calliaweb.co.uk%2Fwp-content%2Fuploads%2F2015%2F10%2F600x600.jpg&f=1&nofb=1" alt="reve" class="img-fluid fit-image">

					<div class="overlay ctr"></div>

				</div>    
				
				

				<div class="wrapper amour col-xl-4 col-lg-6 col-md-12 col-sm-12">
					<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.calliaweb.co.uk%2Fwp-content%2Fuploads%2F2015%2F10%2F600x600.jpg&f=1&nofb=1" alt="amour" class="img-fluid fit-image">

				</div>

				<div class="wrapper charogne col-xl-4 col-lg-6 col-md-12 col-sm-12">
					<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.calliaweb.co.uk%2Fwp-content%2Fuploads%2F2015%2F10%2F600x600.jpg&f=1&nofb=1" alt="charogne" class="img-fluid fit-image">

				</div>
			</div>
		</div>


	</section>
</body>
</html>

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

Спасибо! :)

1 Ответ

0 голосов
/ 21 марта 2020

Ваш .overlay родительский класс:

wrapper reve col-xl-4 col-lg-6 col-md-12 col-sm-12 имеет padding: 15px.

Так что width: 100% будет уважать это.

Я бы использовал width: calc(100% - 30px); (30 пикселей для каждой стороны 15 пикселей)

РЕДАКТИРОВАТЬ: Заполнение 15 пикселей происходит от .col-* Bootstrap классов. Вы можете проверить на вкладке «Вычисленные» в вашем браузере исходный код.
Строка 628:

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...