在响应式全宽滑块中将图像裁剪到中心

Posted 2023-02-25

【中文标题】在响应式全宽滑块中将图像裁剪到中心

【英文标题】：Cropping Image to Center in Responsive Full Width Slider

【发布时间】：2015-03-02 00:05:22

【问题描述】：

我会说我是编码新手。我正在修改 wordpress 中的子主题。

我正在尝试在响应式全宽滑块中居中图像，以便从顶部和底部以最宽的宽度均匀裁剪。我尝试了几种不同的选择，但都没有成功。

这是该网站的链接：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" 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" 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" 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" 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" 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" 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" 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;
`

【问题讨论】：

您好，欢迎来到 ***。请在问题本身中包含任何相关代码。指向外部网站的链接，尤其是您正在开发的网站是有问题的。当您在网站上工作时，您并没有给我们一个固定的工作点。一旦网站被修复，这个问题就变得无关紧要了。

【参考方案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'] . '"/>';

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