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

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

我试图在一个响应性的全宽滑块内将图像居中，以便从顶部和底部以最宽的宽度均匀地剪切图像。我尝试了两种不同的选择，但都没有成功

以下是网站的链接：。它用于页面顶部的初始幻灯片放映

谢谢你的帮助

使用HTML/CSS编辑： 感谢Jon澄清了提问的礼仪。请让我知道，如果我可以添加任何进一步的信息

再次感谢您的帮助

HTML

CSS

---

由于这是一个WordPress标记的问题，您可以使用以下代码：

$image_width = 1280;
$image_height = 720;
add_image_size( 'Your_image_size_name', $image_width, $image_height, array( 'center', 'center' ) );

$image\u width

当前设置为1280，

$image\u height

设置为720。1280和720都是像素数

add_image_size（）是WordPress方法，用于为上载到WordPress安装的每个图像添加新的图像大小。所以你上传的每一张图片都会有这样的大小，加上它们也会从中间裁剪出来

有关此操作的更多信息，请访问

以及

然后，您可以像这样使用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'] . '"/>';

$IMG\u parts=pathinfo（$IMG\u url）；
$html.=''；

---

当然，这必须位于无序列表中，并且每个图像都位于列表项标记中。另外，不要忘记图像的alt文本。

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

$IMG_parts = pathinfo( $img_url );
$html .= '<img src="'. $IMG_parts['dirname'] . '/' . $IMG_parts['filename'] . '-' . $your_image_width . 'x' . $your_image_height . $IMG_parts['extension'] . '"/>';