Question

我想知道我是否可以在div中显示图像的宽度匹配部分？我尝试过使用像width:100%;这样的内容，但仍然只能显示完整的高图像。我使用4列Bootstrap模板来尝试打印图像。这是我的代码（另一个样式代码没有解决......）：

echo "<div class='col-md-3 portfolio-item'>";
    echo "<a href='#'>";
        $url = $row['url'];
        echo "<img style='object-fit:contain;max-height:240px;' class='img-responsive' src='".$url."' alt=''>";
    echo "</a>";
echo "</div>";

高图像示例：http://i.imgur.com/ux6PckG.jpg

我希望如何显示它（顶部，底部或中间并不重要）：http://i.imgur.com/Rt5yAOb.png

当前显示的方式（右侧的白色方块）：http://i.imgur.com/H7iGcj4.png

如果我设置了图像锚点的max-width和max-height，我是否只能显示其中的一部分（顶部，底部或中间并不重要），而无需自行裁剪缩略图？

很难解释我的问题，对不起。我不知道从哪里开始，我的谷歌搜索并没有把我带到任何地方，可能没有使用正确的条款。

Answer 1

问题是您的background: #fff url("../img/filename.jpg") no-repeat 50% 50%;因图片而调整大小。您必须强制使用1：1比例的框来限制图像（ .portfolio-item ）

overflow:hidden

.portfolio-item.square{position:relative}
.portfolio-item.square:before{
  content:'';
  display:block;
  padding-top:100%;
}
.portfolio-item.square > a{
  display:block;
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

更好的方法是将图片设置为<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class='col-md-3 portfolio-item square'> <a href='#'> <img style='max-width:100%;' class='img-responsive' src='http://i.imgur.com/ux6PckG.jpg' alt=''>" </a> </div> <div class='col-md-3 portfolio-item square'> <a href='#'> <img style='max-width:100%;' class='img-responsive' src='http://i.imgur.com/ux6PckG.jpg' alt=''>" </a> </div> <div class='col-md-3 portfolio-item square'> <a href='#'> <img style='max-width:100%;' class='img-responsive' src='http://i.imgur.com/ux6PckG.jpg' alt=''>" </a> </div> <div class='col-md-3 portfolio-item square'> <a href='#'> <img style='max-width:100%;' class='img-responsive' src='http://i.imgur.com/ux6PckG.jpg' alt=''>" </a> </div> </div> </div>标签的背景，这样您就可以控制如何对齐图片（顶部/底部/右侧...... ）通过a

从高大的图像中制作1：1缩放图像而不会使其变宽

1 个答案: