我正在努力将数据库的图像放在我的网页上,我这样做了,但我想创建一个特定的 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>
最佳答案
您可以使用 [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>
关于html - 我的照片没有调整到正确形式的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57764153/