问题很简单而且很常见。我有几个包含图像和文字的方框，我希望它们都具有相同的尺寸，无论图像尺寸和行为都能很好地响应。我怎样才能让它变得更好呢？在我的本地机器上javascript正在运行，但由于我无法理解的原因，这里不是。 javascript代码检查图片是否处于纵向模式并添加另一个类。谢谢。
$(document).ready( function() {
function getImgDim(pic) {
var image = new Image(),
dim = [];
image.src = $(pic).attr("src");
dim = [image.naturalWidth , image.naturalHeight];
return dim;
};
function getContDim(pic) {
return $(pic).parent().width();
};
function portrait (picture) {
$(picture).each(function() {
var dim = getImgDim(this);
// console.log(dim);
if( dim[0] < dim[1] || dim[0] < getContDim(this)) {
$(this).parent().removeClass('u-center-landscape');
$(this).parent().addClass('u-center-portrait');
}
});
};
portrait('.js-box');
});* {
box-sizing: border-box;
}
figure {
margin: 0;
padding: 0;
}
.boxes {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: content-box;
text-align: center;
padding-top: 40px;
}
.boxes:after, .boxes:before {
display: table;
content: "";
}
.boxes:after {
clear: both;
}
.boxes figure {
float: left;
width: 25%;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 30px;
}
.boxes__content {
cursor: pointer;
}
.boxes__content:hover {
-webkit-box-shadow: 0px 0px 20px 5px rgba(102, 102, 102, 0.25);
-moz-box-shadow: 0px 0px 20px 5px rgba(102, 102, 102, 0.25);
box-shadow: 0px 0px 20px 5px rgba(102, 102, 102, 0.25);
border-radius: 10px;
}
.boxes__content:hover .u-center-portrait img {
width: 110%;
transition: width 0.3s ease;
}
.boxes__content:hover .u-center-landscape img {
height: 110%;
transition: height 0.3s ease;
}
.boxes figcaption {
line-height: 60px;
}
.boxes__title {
font-size: 18px;
color: #333;
}
.boxes__img {
height: 220px;
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.u-center-landscape img {
position: relative;
top: 50%;
left: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.u-center-portrait img {
position: relative;
top: 50%;
left: 50%;
height: auto;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="boxes">
<figure>
<div class="boxes__content">
<div class="boxes__img u-center-landscape">
<img class="js-box" src="http://lorempixel.com/700/500/" alt="">
</div>
<figcaption>
<a href="javascript:void(0)" class="boxes__title">Mitteilungen</a>
</figcaption>
</div>
</figure>
<figure>
<div class="boxes__content">
<div class="boxes__img u-center-landscape">
<img class="js-box" src="http://lorempixel.com/400/700/" alt="">
</div>
<figcaption>
<a href="javascript:void(0)" class="boxes__title">Jobbörse</a>
</figcaption>
</div>
</figure>
<figure>
<div class="boxes__content">
<div class="boxes__img u-center-landscape">
<img class="js-box" src="http://lorempixel.com/650/600/" alt="">
</div>
<figcaption>
<a href="javascript:void(0)" class="boxes__title">Ferienjob</a>
</figcaption>
</div>
</figure>
<figure>
<div class="boxes__content">
<div class="boxes__img u-center-landscape">
<img class="js-box" src="http://lorempixel.com/700/400/" alt="">
</div>
<figcaption>
<a href="javascript:void(0)" class="boxes__title">Marktplatz</a>
</figcaption>
</div>
</figure>
<figure>
<div class="boxes__content">
<div class="boxes__img u-center-landscape">
<img class="js-box" src="http://lorempixel.com/700/1200/" alt="">
</div>
<figcaption>
<a href="javascript:void(0)" class="boxes__title">Veranstaltungen</a>
</figcaption>
</div>
</figure>
<figure>
<div class="boxes__content">
<div class="boxes__img u-center-landscape">
<img class="js-box" src="http://lorempixel.com/600/600" alt="">
</div>
<figcaption>
<a href="javascript:void(0)" class="boxes__title">Gruppen</a>
</figcaption>
</div>
</figure>
<figure>
<div class="boxes__content">
<div class="boxes__img u-center-landscape">
<img class="js-box" src="http://lorempixel.com/1400/1920/" alt="">
</div>
<figcaption>
<a href="javascript:void(0)" class="boxes__title">Benachrichtigungen</a>
</figcaption>
</div>
</figure>
<figure>
<div class="boxes__content">
<div class="boxes__img u-center-landscape">
<img class="js-box" src="http://lorempixel.com/1200/500/" alt="">
</div>
<figcaption>
<a href="javascript:void(0)" class="boxes__title">Mein Nachbarn</a>
</figcaption>
</div>
</figure>
</section> <!-- end boxes -->
感谢。
答案 0 :(得分：5)
不确定您对HTML有多少控制权，但您是否考虑使用背景图片而不是<img>标签？然后你就可以在CSS中有足够的控制权来裁剪图像而无需任何JavaScript。例如：
.boxes__img {
display: inline-block;
width: 30%;
height: 200px;
background-size: cover;
background-position: 50% 50%;
}<div class="boxes__img" style="background-image: url('https://placehold.it/350x150');">
</div>
<div class="boxes__img" style="background-image: url('https://placehold.it/150x200');">
</div>
<div class="boxes__img" style="background-image: url('https://placehold.it/300x300');">
</div>
编辑：在评论中根据您的要求，这是另一种技巧。仍然只使用CSS，但使用<img>元素而不是背景图像。
.boxes__img {
display: inline-block;
width: 30%;
height: 200px;
position: relative;
overflow: hidden;
}
.boxes__img img {
min-width: 100%;
min-height: 100%;
max-width: 300%;
max-height: 300%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="boxes__img">
<img src="https://placehold.it/350x150" />
</div>
<div class="boxes__img">
<img src="https://placehold.it/150x200" />
</div>
<div class="boxes__img">
<img src="https://placehold.it/1920x1200" />
</div>
答案 1 :(得分：0)
您可以使用预定义的宽高比。
@mixin aspect-ratio($width, $height) {
position: relative;
overflow: hidden;
&:after {
// Use padding to replace height
display: block;
content: " ";
width: 100%;
padding-top: ($height / $width) * 100%;
}
}
.avatar {
@include aspect-ratio(1, 1); // alternatively use something like 16,9 or 4,3
width: 100%;
background-size: cover;
background-position: 50% 50%;
}
<div class="avatar" style="background-image: url(image.jpg);"></div>