Как установить максимальную ширину в изображениях с различными адаптивными размерами начальной загрузки? - PullRequest
0 голосов
/ 10 мая 2019

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

То, что отображается в данный момент

https://imgur.com/bDqDMJC

Что вы хотите на моем сайте

https://imgur.com/0ArCI6L

HTML:

<div class="row">
<?php
        $select_stmt=$db->prepare("SELECT * FROM destaques ORDER BY id DESC LIMIT 1;"); //sql select query
        $select_stmt->execute();
        while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
        {
    ?>
<div class="col-sm-12 col-md-6 col-lg-4" id="destaques_espaco">
    <br>
        <a style="display:block" href="admin_destaques.php" id="url_sem_linha"> 
            <div id="imagem"><img src="upload/destaques/<?php echo $row['image']; ?>" class="img-fluid" id="imagem_destaque"></div>
            <div id="titulo_menu"><?php echo $row['titulo'];?></div>
        </a>
        <br>
</div>
    <?php
        }
    ?>

CSS:

#imagem_destaque{
  min-height: 250px;
  max-width: 300px;
}

#titulo_menu{
  max-width: 300px;
  background-color:#C2C23A;
  font-weight: bold;
  font-size: 20px;
  color: white;
  line-height: 2;
  padding-left: 10px;
}

#titulo_menu:hover{
  color: white;
  text-decoration:none;
}

Ответы [ 2 ]

0 голосов
/ 10 мая 2019

Попробуйте, это работает для меня. Надеюсь, это поможет вам.

#imagem_destaque {
  height: 250px;
  width: 300px;
}

#titulo_menu {
  max-width: 300px;
  background-color: #C2C23A;
  font-weight: bold;
  font-size: 20px;
  color: white;
  line-height: 2;
  padding-left: 10px;
}

#titulo_menu:hover {
  color: white;
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-sm-4" id="destaques_espaco">
        <br>
        <a style="display:block" href="admin_destaques.php" id="url_sem_linha">
          <div id="imagem"><img src="https://i.ebayimg.com/images/g/lAgAAOSwWAhcFLHg/s-l300.jpg" class="img-fluid img-1" class="img-fluid" id="imagem_destaque"></div>
          <div id="titulo_menu">Title</div>
        </a>
        <br>
      </div>
      <div class="col-sm-4" id="destaques_espaco">
        <br>
        <a style="display:block" href="admin_destaques.php" id="url_sem_linha">
          <div id="imagem"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1bHL-HroyjayQ-OzEENg90I7a6CdtNRnn6l7KdSC8LlXr7H5w" class="img-fluid img-1" class="img-fluid" id="imagem_destaque"></div>
          <div id="titulo_menu">Title</div>
        </a>
        <br>
      </div>
      <div class="col-sm-4" id="destaques_espaco">
        <br>
        <a style="display:block" href="admin_destaques.php" id="url_sem_linha">
          <div id="imagem"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1bHL-HroyjayQ-OzEENg90I7a6CdtNRnn6l7KdSC8LlXr7H5w" class="img-fluid" id="imagem_destaque"></div>
          <div id="titulo_menu">Title</div>
        </a>
        <br>
      </div>
    </div>
  </div>
</body>

</html>
0 голосов
/ 10 мая 2019

Вот что вы можете попробовать с вашим тегом <img/>.Надеюсь, это может работать для вас.

Добавьте строку ниже к вашему тегу <img/>.

style="max-width: 120px; max-height: 120px"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...