我正在使用 HTML5 的 <picture>
标签来创建一个响应式标题,该标题将拉伸(stretch)浏览器的整个宽度。页眉使用图像作为背景。
对于较大的屏幕,我将高度限制为定义的值。但是,我注意到图像的某个断点开始拉伸(stretch)和扭曲图像。
我熟悉使用 CSS 的 background-image: url();
创建一个掩码以防止失真,但我不知道什么是最佳实践 <picture>
.
我的代码目前会拉伸(stretch)和扭曲图像。有没有办法“屏蔽”图像?
最佳答案
您应该知道的第一件事是,如果您为任何图像指定高度,那么在某些屏幕上它会拉伸(stretch)。
因此,与其给出高度,不如拍摄准确尺寸的图像,它会做到这一点。
如果您可以分享代码,我可以修复它并发送给您。
希望对您有所帮助。
关于html - 如何防止使用 html5 图片标签和定义的高度拉伸(stretch)图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57663422/