html - 在响应式全宽 slider 中将图像裁剪到中心

Question

我将在此之前说我是编码新手。我正在修改 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;
}`

Answer 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'] . '"/>';

当然，这必须在无序列表中，并且每个图像都在列表项标签中。也不要忘记图片的替代文字。