Question

我在处理几张具有不同尺寸的图像时遇到困难，我计划设置最大宽度和高度以响应，而不会导致启动时模糊。

目前正在显示什么

您想要在我的网站上

HTML：

  function sortOnEdit(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("MAIN EVENT");
  sheet.sort(3, false).sort(2, false);
}

function sortOnEdit(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("TOP TEN");
  sheet.sort(3, false).sort(2, false);
}

function sortOnEdit(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("TOP FOUR");
  sheet.sort(3, false).sort(2, false);
}

function sortOnEdit(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("TOP TWO");
  sheet.sort(3, false).sort(2, false);
}

CSS：

<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
        }
    ?>

Answer 1

这是您可以尝试使用<img/>标签的方法。希望它可以为您服务。

将以下行添加到您的<img/>标记中。

style="max-width: 120px; max-height: 120px"

Answer 2

尝试一下，它对我有用。希望它将对您有帮助。

#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>

如何在具有不同引导响应大小的图像中设置最大宽度？

2 个答案: