博客上的图片被裁剪

要解决博客上的图片被裁剪的问题，可以使用以下代码示例中的方法：

1. 使用CSS来控制图片的大小和显示方式：

<style>
    .blog-image {
        max-width: 100%;
        height: auto;
        object-fit: contain; /* 或者使用 object-fit: cover; 根据需要选择 */
    }
</style>

<img src="path/to/image.jpg" alt="Blog Image" class="blog-image">

在上面的代码中，.blog-image 是一个 CSS 类，你可以将其添加到博客中的图片元素上。max-width: 100%; 将确保图片在其容器中自适应大小，height: auto; 则保持了原始图片的高宽比。object-fit: contain; 或者 object-fit: cover; 决定了图片在容器中的显示方式，contain 表示保持图片完整显示，cover 表示图片覆盖整个容器。

2. 使用JavaScript来自动调整图片大小：

<script>
    function adjustImageSize() {
        var images = document.querySelectorAll('.blog-image');
        for (var i = 0; i < images.length; i++) {
            var image = images[i];
            image.style.maxWidth = "100%";
            image.style.height = "auto";
        }
    }

    window.addEventListener('load', adjustImageSize);
    window.addEventListener('resize', adjustImageSize);
</script>

<img src="path/to/image.jpg" alt="Blog Image" class="blog-image">

上面的代码使用了 querySelectorAll() 方法来获取所有带有 .blog-image 类的图片元素。然后，在 adjustImageSize() 函数中，通过设置图片的 max-width 和 height 来自动调整图片的大小。window.addEventListener('load', adjustImageSize) 和 window.addEventListener('resize', adjustImageSize) 用于在页面加载完成和窗口大小改变时调用 adjustImageSize() 函数。

通过使用上述代码示例中的方法，你可以解决博客上的图片被裁剪的问题，并确保图片在博客中显示完整。