固定缩略图比例尺寸&保持宽高比？ [英] Fixed thumbnail ratio size & maintaining aspect ratio?
问题描述
我创建了一个响应式缩略图网格，其中包含4-to -3到2列结构（百分比25％-33,33％-50％）。
我使用500x330px的虚拟占位符图片进行测试，但我希望拥有固定的缩略图占位符（css代码？），并且具有500x330响应速度并保持放置在居中（垂直和水平）占位符缩略图的图像的宽高比。
在小提琴示例中，我在photoshop中制作了一些尺寸为500x330px的缩略图，并且尺寸不同，因此它不是真正的横向图像，但它给出了我想要实现的想法。我希望有人了解我的问题，并可以帮助我或指导我完成。
我将它从 .thumb 类中移除，并将它添加到 .img-包装类。
There are some questions that are properly similar, but i can't relate it to my specific situation.
I have created a responsive thumbnail grid with 4-to-3-to-2 columns structure (in percentages 25%-33,33%-50%).
I'm using a fake placeholder image of 500x330px for testing, but i would like to have a fixed thumbnail placeholder (css code?) with a responsive 500x330 ratio and maintain the aspect radio of the images placed in centered (vertical and horizontal) the placeholder thumbnail.
In the fiddle example i've made some thumbnails in photoshop that have a 500x330px size and within different portrait and landscape sizes so it isn't really a portrait of landscape image, but it gives a idea what i want to achieve. I hope someone understands my question and can help me out or guide me through.
<div class="col-4">
<a class="thumb" href="#">
<img src="img/test2.jpg">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
I think This is the result you are trying to acheive.
I added a div.img-wrapper around each thumb and some css magic
HTML
<div id="container">
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image1_%20164248809.jpg">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://upload.wikimedia.org/wikipedia/commons/f/f5/Poster-sized_portrait_of_Barack_Obama.jpg">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
<div class="col-4">
<div class="img-wrapper"> <a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption">Project untitled<br> Category</div>
</a>
</div>
</div>
</div>
Changed CSS#
.col-4 {
position: relative;
float: left;
display: inline-block;
}
.col-4:after {
padding-top: 63%;
display: block;
content:'';
}
.img-wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/*fill parent*/
}
.img-wrapper .thumb {
height:100%;
.img-project img, .thumb img {
position:relative;
top:50%;
left:50%;
max-width:100%;
max-height:100%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform: translate(-50%,-50%);
}
FULL CSS
/************************************************
Site Name:
Author:
************************************************/
html {
margin: 0;
padding: 0;
}
body {
font-family: regular, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 18px;
line-height: 1.4;
text-transform: none;
letter-spacing: 0;
color: #111;
overflow-y: scroll;
}
body, input, textarea, select, button {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
b, strong {
font-weight: normal;
}
a, a:visited {
color: #111;
text-decoration: underline;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
h1, nav {
font-size: 27px;
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
background-color: transparent;
}
h1 {
margin: 0 0 26px 0;
}
p {
margin: 0 0 16px 0;
background-color: transparent;
}
p a:hover, a:focus, a:active {
color: #111;
text-decoration: none;
}
h1 a, a:visited {
color: #111;
text-decoration: none;
}
h1 a:hover, a:focus, a:active {
color: #111;
text-decoration: underline;
}
/************************************************
Thumbnails - Columns - Content
************************************************/
#container {
display: block;
margin: 98px 10px 100px 10px;
overflow: hidden;
background-color: transparent;
}
.col-4 {
position: relative;
float: left;
display: inline-block;
}
.col-4 {
width: 25%;
}
.col-4:after {
padding-top: 63%;
display: block;
content:'';
}
.img-wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/*fill parent*/
}
.img-wrapper .thumb {
height:100%;
}
.img-project, .thumb {
display: block;
padding: 10px;
}
.img-project img, .thumb img {
position:relative;
top:50%;
left:50%;
max-width:100%;
max-height:100%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumb:hover img {
opacity: 0.2;
}
.caption {
position: absolute;
opacity: 0;
width: 80%;
padding: 0;
top: 50%;
left: 50%;
text-align: center;
background-color: transparent;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.col-4 a:hover .caption {
opacity: 1;
}
/************************************************
Media queries
************************************************/
@media all and (max-width: 1024px) {
h1, nav {
font-size: 22px;
}
#container {
margin: 89px 7px 100px 7px;
}
.img-project, .thumb {
padding: 7px;
}
}
@media all and (min-width: 769px) {
nav ul {
display: block !important;
}
}
@media all and (max-width: 768px) {
body {
font-size: 16px;
}
.col-4 {
width: 33.33333%;
}
}
@media all and (max-width: 479px) {
.col-4 {
width: 50%;
}
}
UPDATE 1
I may have calculated the aspect ratio as 1: 0.63 a bit wrong. You should play with the padding-top of the :after element to achieve the needed ratio
UPDATE 2
As you asked added the padding - Fiddle
I just removed it from .thumb class and added it to .img-wrapper class.
这篇关于固定缩略图比例尺寸&保持宽高比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
