我将在此之前说我是编码新手。我正在修改 wordpress 中的子主题。
我正在尝试将图像置于响应式全宽 slider 的中心，以在其最宽处从顶部和底部均匀裁剪。我尝试了几种不同的选择但没有成功。
这是网站的链接:http://50.87.248.76/~topheran/ .它用于页面顶部的初始幻灯片。
感谢您的帮助。
使用 HTML/CSS 编辑: 感谢 Jon 阐明了发布问题的礼节。如果我可以添加任何进一步的信息，请告诉我。
再次感谢您的帮助。
HTML
<div class="fullwidth_slider"><div class="carousel slide carousel-fade">
<div class="slider_overlay"></div>
<ol class="carousel-indicators"><li class="active" data-slide-to="0"></li>
<li class="" data-slide-to="1" data-target="#fullwidth_slider"></li>
<li class="" data-slide-to="2" data-target="#fullwidth_slider"></li>
<li class="" data-slide-to="3" data-target="#fullwidth_slider"></li>
<li class="" data-slide-to="4" data-target="#fullwidth_slider"></li>
<li class="" data-slide-to="5" data-target="#fullwidth_slider"></li>
<li class="" data-slide-to="6" data-target="#fullwidth_slider"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img class="img-responsive" alt="placeholder image" src= "slide1.png" />
<div class="carousel-caption"><h1></h1><p class="lead"><a class="btn btn btn-lg" href="#section1"></a></p>
</div>
</div>
<div class="item "><img class="img-responsive" alt="placeholder image" src="slide2.png" />
<div class="carousel-caption"><h1></h1><p class="lead"><a class="btn btn btn-lg" href="#section2">k</a></p>
</div>
</div>
<div class="item "><img class="img-responsive" alt="placeholder image" src="slide3.png" />
<div class="carousel-caption"><h1></h1><p class="lead"><a class="btn btn btn-lg" href="#section3"></a></p>
</div>
</div>
<div class="item "><img class="img-responsive" alt="placeholder image" src="slide4.png" />
<div class="carousel-caption"><h1></h1><a class="btn btn btn-lg" href="#section4"></a>
</div>
</div>
<div class="item "><img class="img-responsive" alt="placeholder image" src="slide5.png" />
<div class="carousel-caption"><h1></h1><p class="lead"><a class="btn btn btn-lg" href="section5"></a></p>
</div>
</div>
<div class="item "><img class="img-responsive" alt="placeholder image" src="slide6.png" />
<div class="carousel-caption"><h1></h1><p class="lead"><a class="btn btn btn-lg" href="#section6"></a></p>
</div>
</div>
<div class="item "><img class="img-responsive" alt="placeholder image" src="slide7.png" />
<div class="carousel-caption"><h1></h1>
</div>
</div>
</div>
CSS
`.fullwidth_slider {
max-height: 975px;
max-width: 100%;
overflow: hidden;
position: relative;
display: block;
z-index: 0;
}
.fullwidth_slider .carousel-inner img{
max-height: 100%;
}
.slider_overlay {
background: none repeat scroll 0 0 rgba(40, 40, 40, 0.7);
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.fullwidth_slider .carousel-inner img {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
left: 0;
position: relative;
width: 100%;
min-width: 1400px;
z-index: 0;
max-height: 100%;
}
.fullwidth_slider .carousel{
display: block;
max-height: 1050px;
}
.fullwidth_slider .carousel-caption {
background-color: rgba(0, 0, 0, 0);
border-radius: 0;
float: none;
padding: 0;
text-align: center;
top: 30%;
}
.fullwidth_slider .carousel-control{
cursor:pointer;
z-index: 999;
}
.fullwidth_slider .carousel-indicators{
bottom: 60px;
}
.fullwidth_slider .carousel-caption h1 {
color: #FFFFFF;
display: block;
margin-top: 0;
text-transform: uppercase;
}
.fullwidth_slider p.lead {
color: #EBEDEF;
font-size: 28px !important;
line-height: 1.46429 !important;
margin: 0 auto;
max-width: 800px;
}
.fullwidth_slider .carousel-caption p {
font-size: 18px;
line-height: 1.72222;
margin: 0 auto;
max-width: 800px;
}
.fullwidth_slider .slider_overlay{
z-index: 1;
}`
最佳答案
由于这是一个 WordPress 标记问题，您可以使用以下代码:
$image_width = 1280;
$image_height = 720;
add_image_size( 'Your_image_size_name', $image_width, $image_height, array( 'center', 'center' ) );
$image_width 当前设置为 1280，$image_height 设置为 720。1280 和 720 都是像素数。
add_image_size() 是 WordPress 方法，用于为您上传到 WordPress 安装的每个图像添加新的图像尺寸。因此，您上传的每张图片都会有这个尺寸，而且它们也会从中心被裁剪。
有关此的更多信息，请访问
http://codex.wordpress.org/Function_Reference/add_image_size
然后 http://havecamerawilltravel.com/photographer/wordpress-thumbnail-crop
然后您可以像这样使用 PHP 的 pathinfo() 方法并制作幻灯片:
$IMG_parts = pathinfo( $img_url );
$html .= '<img src="'. $IMG_parts['dirname'] . '/' . $IMG_parts['filename'] . '-' . $your_image_width . 'x' . $your_image_height . $IMG_parts['extension'] . '"/>';
当然，这必须在无序列表中，并且每个图像都在列表项标签中。也不要忘记图片的替代文字。
关于html - 在响应式全宽 slider 中将图像裁剪到中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28800840/