html - 如何防止使用 html5 图片标签和定义的高度拉伸(stretch)图像?

标签 html css image

我正在使用 HTML5 的 <picture>标签来创建一个响应式标题,该标题将拉伸(stretch)浏览器的整个宽度。页眉使用图像作为背景。

对于较大的屏幕,我将高度限制为定义的值。但是,我注意到图像的某个断点开始拉伸(stretch)和扭曲图像。

我熟悉使用 CSS 的 background-image: url();创建一个掩码以防止失真,但我不知道什么是最佳实践 <picture> .

我的代码目前会拉伸(stretch)和扭曲图像。有没有办法“屏蔽”图像?

最佳答案

您应该知道的第一件事是,如果您为任何图像指定高度,那么在某些屏幕上它会拉伸(stretch)。

因此,与其给出高度,不如拍摄准确尺寸的图像,它会做到这一点。

如果您可以分享代码,我可以修复它并发送给您。

希望对您有所帮助。

关于html - 如何防止使用 html5 图片标签和定义的高度拉伸(stretch)图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57663422/

相关文章:

javascript - 在 Canvas 上绘制多个图像并保存到图像

javascript - 使用复选框 onClick 覆盖父级 onClick 事件?

javascript - Ghost 1.0 Disqus 评论数未反射(reflect)帖子评论

css - 制作一个前面没有换行符的 <div> 元素?

html - CSS 中的选项卡菜单 - 如何设置事件选项卡

css - 在 SweetAlert 上更改图标图像大小

html - ul 正在应用样式,但从哪里应用?

Jquery 事件委托(delegate)不起作用

javascript - 将居中图像缩放到浏览器窗口

html - 使用 Display :Block property 在图像上显示按钮