什么是一个很好的方式来使图像适合内部类似于如何pinterest呢？

基本上，简单的东西，如：什么是一个很好的方式来使图像适合内部类似于如何pinterest呢？

<div class="container"> 
    <img src="something.jpg" class="image"> 
    <div class="well">Title</div> 
</div>

如果IMG能够像400像素例如最大高度（我认为Pinterest的让他们适应得很好），你怎么让它不可怕压缩本身？

.image { 
    width: 100%; 
    max-height: 300px; 
    height: 100%; 
}

来源

2016-07-22 user1354934

http://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit -a-div-container – Sami

谢谢，但我遇到的问题是设置最大高度。如果我有一个像600x150一样的瘦图像，但我想将它放在最大高度300px内？ – user1354934

如果你使用background-size：cover！important，。但这不会扭曲图像，但填补了分区。 – Sami

我认为你应该只设置宽度或高度为“100％”，另一个设置为“自动”它将保持图像的比例。

HTML：

<div class="container"> 
    <img src="xxx.jpg" class="image"> 
</div> 
<div class="well">Title</div>

CSS：

.container { 
    height:400px; 
    width:100%; 
    overflow: hidden; 
    text-align: center; 
} 
.image { 
    width: auto; 
    height: 100%; 
}

另一种方式，你可以使用background-image属性，便于控制的背景大小。

HTML：

<div class="container"></div> 
    <div class="well">Title</div>

CSS：

.container { 
     height:400px; 
     width:100%; 
     background-image: url("xxx.jpg"); 
     background-size: cover; 
     background-position: center; 
    }

来源

2016-07-22 03:09:41 Tawan

什么是一个很好的方式来使图像适合内部类似于如何pinterest呢？

回答

相关问题