Поместите фиксированный текст в изображение - отзывчивый с начальной загрузкой - PullRequest
Новая
       2

Поместите фиксированный текст в изображение - отзывчивый с начальной загрузкой

0 голосов
/ 23 сентября 2019

Я пытаюсь поместить текст и кнопку внутри изображения, но я не могу заставить их реагировать. 

.dados {
    bottom: 10px;
    right: 0;
}

.text {
    font-family: "Arial Bold", Arial;
    font-weight: 700;
    font-size: 22px;
    color: #ffffff !important;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div class="container">
<div class="row mt-4">
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
 </body>
</html>

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

Я хочу, чтобы эта информация была внутри изображения в правом нижнем углу.Кто-нибудь знает, как это сделать, чтобы они оставались отзывчивыми?

Ответы [ 3 ]

0 голосов
/ 23 сентября 2019

сделайте ваше относительное отступом рамки сверху 100%, и ваше изображение также должно быть в положении absolute, а также примените CSS к изображению, как я применяю, так что теперь, если вы используете любой размер изображения, изображение устанавливается внутри вас.поле без крахмала или сжатия и отображения центральной квадратной части изображения.

см. мой фрагмент для решения. 

.position-relative img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
}
.position-relative {
  padding-top: 100%;
}
.position-absolute {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
  <div class="container">
    <div class="row mt-4">
      <div class="col-md-4 col-sm-6 mb-3">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 mb-3">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 mb-3">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
0 голосов
/ 23 сентября 2019

Вы можете использовать Bootstrap Cards и наложение изображений.
Для получения дополнительной информации см. https://www.w3schools.com/bootstrap4/bootstrap_cards.asp и https://getbootstrap.com/docs/4.0/components/card/
Попробуйте фрагмент на полной странице, чтобы увидеть отзывчивость

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-4">
    <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text . Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card ">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text . Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card img-fluid">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>

** Обновление: **: вы можете использовать flex для достижения того же 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.card {
  display: flex;
  flex-direction: column;
}

card-img-overlay {
  margin-bottom: auto;
}
</style>
</head>
<body>
<div class="row">
  <div class="col-sm-4">
    <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay card-body d-flex flex-column" style="">
       <div class="mt-auto">
       <h4 class="card-title ">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
   <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay card-body d-flex flex-column" style="">
       <div class="mt-auto">
       <h4 class="card-title ">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay card-body d-flex flex-column" style="">
       <div class="mt-auto">
       <h4 class="card-title ">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>

Посмотрите на полноэкранный режим, чтобы увидеть, что эта кнопка и все переместилось вниз.
Если вы хотите, чтобы что-то было сверху, переместите его за пределы <div class="mt-auto">.

0 голосов
/ 23 сентября 2019

добавлено 

img {
  min-height: 300px;
  object-fit: cover;
  width: 100%

}

к img 

.dados {
  bottom: 10px;
  right: 0;
}

.text {
  font-family: "Arial Bold", Arial;
  font-weight: 700;
  font-size: 22px;
  color: #ffffff !important;
}

img {
  min-height: 300px;
  object-fit: cover;
  width: 100%
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title>Teste</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

<body>
  <div class="container">
    <div class="row mt-4">
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img class="img-fluid" src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img class="img-fluid" src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...