Css 使用overflow:hidden调整过大图像的大小并保持纵横比_Css_Responsive Design_Overflow_Image Resizing

Css 使用overflow:hidden调整过大图像的大小并保持纵横比

css responsive-design

Css 使用overflow:hidden调整过大图像的大小并保持纵横比,css,responsive-design,overflow,image-resizing,Css,Responsive Design,Overflow,Image Resizing,我正在创建一个响应性强的图库，我的客户会给我发送横向和纵向的不同大小的图像我正在尝试创建一种方法，通过使用css拍摄内联图像并保持纵横比不变这是我创建的代码笔的链接。请随意编辑框内的图像是3137 x 4012，我试图通过使用类max img border将图像宽度保持在网格3内的100% 然后我希望高度保持相同的纵横比，这样图像就不会被压扁，而是被隐藏。例如，树的顶部将被类max img border中的overflow:hidden命令隐藏我将如何实现这一点另外，如果你能做到这

我正在创建一个响应性强的图库，我的客户会给我发送横向和纵向的不同大小的图像

我正在尝试创建一种方法，通过使用css拍摄内联图像并保持纵横比不变

这是我创建的代码笔的链接。请随意编辑

框内的图像是3137 x 4012，我试图通过使用类max img border将图像宽度保持在网格3内的100%

然后我希望高度保持相同的纵横比，这样图像就不会被压扁，而是被隐藏。例如，树的顶部将被类max img border中的overflow:hidden命令隐藏

我将如何实现这一点

另外，如果你能做到这一点，有没有办法添加位置：居中

如果你不想看代码笔，这里有代码

HTML

<body>

<div class="tree">

  <div class="grid_3">
    <a class="fancybox" rel="gallery1" href="http://upload.wikimedia.org/wikipedia/commons/f/fe/Tree_at_Golf_Course.JPG" title="Tree removal">
      <img src="http://upload.wikimedia.org/wikipedia/commons/f/fe/Tree_at_Golf_Course.JPG" alt="Tree removal" class="max-img-border">
    </a>
    <h5>Tree Removal</h5>
  </div>

</div>

</body>

您可以使用垂直对齐和负边距来实际降低图像的高度

但是，如果您想保持框本身的高度比率，可以根据父对象的宽度或窗口的宽度来确定。是否需要此框从窗口浏览器中按比例扩展宽度和高度？我需要保持框的高度不变。因此，画廊中的所有图像都是平等的。纵向/垂直图像我不在乎图像的顶部是否被切断，我只需要保持盒子/容器的大小不变。不挤压图像。多高？窗宽比？看看这个：或者这个你需要的可能是这两个的混合。这是一个我想要做的照片商店综合。您好，就在后面，如果您设置了最大高度，它是您要查找或剪裁的吗？但是，如果您想保持框本身的高度比率，它可以从父对象的宽度或窗口的宽度来确定。是否需要此框从窗口浏览器中按比例扩展宽度和高度？我需要保持框的高度不变。因此，画廊中的所有图像都是平等的。纵向/垂直图像我不在乎图像的顶部是否被切断，我只需要保持盒子/容器的大小不变。不挤压图像。多高？窗宽比？看看这个：或者这个你需要的可能是这两个的混合。这是一个我想要做的照片商店综合。嗨，刚刚回来，如果你设置了一个最大高度，这是你想要的还是剪裁的？你没有为你的盒子设置任何高度，除了宽度之外，你希望如何隐藏somthing？你没有为你的盒子设置任何高度，除了宽度之外，你希望如何隐藏somthing？

body{
    background-color:#1f1f1f;
}

.tree{
    margin:150px auto;
}

.grid_3 {
    width:260px;
    margin:0 20px;
    float:left;
    display:inline;
}

.max-img-border {
    width:100%;
    height:auto;
    max-height:180px;
    border:solid 2px #FFFFFF;
    margin-bottom:10px;
    overflow:hidden;
    display:inline-block; 
}

h5 {
    margin:0 0 10px 0;
    padding:0;
    font-size:17px;
    line-height:19px;
    color:#FFFFFF;
    font-weight:700;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75);
    text-align:center;
}

.grid_3 {
    width:260px;
    margin:0 20px;
    float:left;
    text-align:center;
    overflow:hidden;
    background:rgba(255,255,255,0.02);
}

.grid_3 a {
  display:block;  
  height:171px; border:solid 2px #FFFFFF;
  line-height:168px;
  overflow:hidden;
  margin-bottom:10px;
}

.max-img-border {
    width:100%;
    margin:-100% 0;
    vertical-align:middle;
}