html - 我的照片没有调整到正确形式的 div

Question

我正在努力将数据库的图像放在我的网页上，我这样做了，但我想创建一个特定的 div 来包含照片，照片有不同的大小，并且它们错误地配置了我的 div。我想创建一个具有标准尺寸图像的 div。高度和体重。

我尝试了 object-fit，但它们不起作用。

    .producto{
    display: inline-block;
    text-align: center;
    max-width:25%;
    max-height:50%;
    padding:1%;
    background: rgba(232,232,232);
    color:#333;
    margin:5px;

   }




    .cajafoto{
    display: inline-block;
    width:69%;
    padding:10px;
    background: rgba(232,232,232);
    color:#333;
    margin:6px;

   }


    .img_producto{
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #BDBDBD;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit; 

   }


    .name_producto{
       padding:10px;
       color:#fff;
       background:#ff0000;
       text-align: center;
       font-size:18px;
   }
    </style>

        <div class="producto">
                <div class="name_producto"><?php print($img['id']); ?></div> 
                <div class="cajafoto">
                <div><img class="img_producto" src="<?php print($img['imagen']); ?>"/></div> 
                <a href="#"><input type="button" class="btn btn-success" value="See"></a>

                </div> 
         </div>

Answer 1

您可以使用 [grid][1] 布局来简化所有这些。将您的产品包装在应用这些样式的容器中:

display: grid;
/* Use 25% to have four items in a row */
grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));

工作示例:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
}

.producto {
  text-align: center;
  padding: 1%;
  background: rgba(232, 232, 232);
  color: #333;
  margin: 5px;
}

.cajafoto {
  display: inline-block;
  width: 69%;
  padding: 10px;
  background: rgba(232, 232, 232);
  color: #333;
  margin: 6px;
}

.img_producto {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background-color: #BDBDBD;
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: inherit;
}

.name_producto {
  padding: 10px;
  color: #fff;
  background: #ff0000;
  text-align: center;
  font-size: 18px;
}

<div class="container">
  <div class="producto">
    <div class="name_producto">
      <?php print($img['id']); ?>
    </div>
    <div class="cajafoto">
      <div><img class="img_producto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" /></div>
      <a href="#"><input type="button" class="btn btn-success" value="See"></a>
    </div>
  </div>

  <div class="producto">
    <div class="name_producto">
      <?php print($img['id']); ?>
    </div>
    <div class="cajafoto">
      <div><img class="img_producto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" /></div>
      <a href="#"><input type="button" class="btn btn-success" value="See"></a>
    </div>
  </div>

  <div class="producto">
    <div class="name_producto">
      <?php print($img['id']); ?>
    </div>
    <div class="cajafoto">
      <div><img class="img_producto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" /></div>
      <a href="#"><input type="button" class="btn btn-success" value="See"></a>
    </div>
  </div>

  <div class="producto">
    <div class="name_producto">
      <?php print($img['id']); ?>
    </div>
    <div class="cajafoto">
      <div><img class="img_producto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" /></div>
      <a href="#"><input type="button" class="btn btn-success" value="See"></a>
    </div>
  </div>
  <div class="producto">
    <div class="name_producto">
      <?php print($img['id']); ?>
    </div>
    <div class="cajafoto">
      <div><img class="img_producto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" /></div>
      <a href="#"><input type="button" class="btn btn-success" value="See"></a>
    </div>
  </div>
  <div class="producto">
    <div class="name_producto">
      <?php print($img['id']); ?>
    </div>
    <div class="cajafoto">
      <div><img class="img_producto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" /></div>
      <a href="#"><input type="button" class="btn btn-success" value="See"></a>
    </div>
  </div>
</div>