Question

我将图像放在固定背景图像的中央，我希望图像在以任何方式呈现更小或更大的页面时保持完全相同的大小（不会变大或变小）（从左到右依次为到底部）。我尝试了min-width和max-width，这使得从左或右渲染页面时图像保持相同的大小，但是从上到下渲染页面时图像确实变小或变大。

欢迎任何帮助

export const menuItemDataType = new GraphQL.GraphQLObjectType({
    name: 'MenuItemData',
    fields: () => ({
        staticUrl: {
            type: GraphQL.GraphQLString
        },
        page: {
            type: new GraphQL.GraphQLNonNull(menuItemType),
            resolve(MenuItemData) {
                return PageRepository.getPageById(MenuItemData.page).exec();
            }
        },
        menu: {
            type: new GraphQL.GraphQLNonNull(menuType),
            resolve(MenuItemData) {
                return MenuRepository.getMenuById(MenuItemData.menu).exec();
            }
        }
    })
})

    body {
    background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    }
    
    .still{
    padding-top: 30px;
    }

Answer 1

如果您可以删除内联样式并访问css，请为其指定固定宽度：

.still {
    display: block;
    width: 300px;
    margin: 0 auto;
}

否则在html中将style="width: 90%"更改为style="display: block; width: 300px; margin: 0 auto;"

Answer 2

您可以使用<img width="300">它是默认的img之一标签属性，如果你想修改尺寸，请不要使用百分比

如何使图像保持相同的大小

2 个答案: