Question

我将通过说我是编码新手来为此加上前缀。我正在修改wordpress中的子主题。

我试图将图像置于响应的全宽滑块内，以便在其最宽的宽度上均匀地从顶部和底部裁剪。我尝试了几种不同的选择但没有成功。

以下是该网站的链接：http://50.87.248.76/~topheran/。它是页面顶部的初始幻灯片。

感谢您的帮助。

使用HTML / CSS编辑：感谢Jon澄清发布问题的礼仪。如果我可以添加任何进一步的信息，请告诉我。

再次感谢您的帮助。

HTML

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

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

裁剪图像到响应全宽滑块的中心

1 个答案: