调整窗口大小时如何裁剪图像HTML / CSS

Question

我必须使用HTML / CSS创建一个网站，并且该图片的宽度大于页面，但是我只希望它不再占据页面右侧的空间。

这是我的代码：library(ggplot2) dat %>% tidyr::pivot_longer(cols = A:C) %>% ggplot()+aes(x=value, y = y, color = name) + geom_point() + facet_wrap(~group)

这是网站上图片的外观图片。我不要滚动条在底部。我想让图片适应窗口的宽度，然后停在我画的红线处。

你能帮我吗？

Answer 1

将图像放入div内，并在左侧将图像div和内容的div设置为所需视口百分比的宽度（也许为60:40），以vw为单位。例如：宽度：60vw；

Answer 2

您可以在x轴上隐藏溢出。

overflow-x and overflow-y属性指定是仅水平更改还是垂直更改（或同时更改）内容溢出。

overflow-x指定如何处理内容的左/右边缘。

隐藏了溢流-溢流被裁剪，其余内容将不可见

<img src=".\styleCSS\images\Image_menu.jpg" style="float: right; background-size: cover; height : 100%; width: auto; overflow-x:hidden; position : absolute; left : 60.7%;">

Answer 3

尝试：

 body{
    overflow-x:hidden;
    }

您还可以在img标签中使用：width: 100%; height: auto;。