html - 制作响应式网站但图像太小?

标签 html css mobile responsive desktop

我对编码还很陌生,需要帮助。

我正在创建一个响应式网站,但我被标题图片困住了。在桌面上,它看起来不错。当我转到移动设备时,我喜欢它的大小,但图像会超出容器并显示水平滚动条。我尝试了 (overflow-x: hidden;) 来完成隐藏滚动条的工作,但它最终弄乱了移动 View 中的图像。

然后我给图像容器设置了 100% 的宽度,它完全适合屏幕,没有水平条,但是图像太小了。

我想知道如何让图像保持不变但适合容器?

我附上了一张图片来进一步解释我在说什么。谢谢!

enter image description here

最佳答案

您可以使用 srcset html 代码。这很简单。

<img srcset="image.jpg 320w, image.jpg 480w, image.jpg 800w"
 sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
 src="image.jpg" alt="Image">

关于html - 制作响应式网站但图像太小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53078752/

相关文章:

javascript - 如何将值 "auto"添加到 div?Jquery

javascript - 通过 JavaScript/网络应用程序在设备上引导 OneDrive

mobile - Google Maps API 中的 'meta viewport user-scalable=no' 有什么意义

javascript - 如何在 HTML + CSS 中通过另一个元素选择器更改一个元素的属性值?

html - XPath//div[contains(text(), 'string' )] 无法选择包含 'string' 的 div

css - <li> 具有自适应宽度的元素

android - tabBarIcon 未显示在 createBottomTabNavigator 上

javascript - 从 HTML 表中选择仅具有指定值的行?

html - 如何在全屏上拉伸(stretch) flexbox?

css - 如何覆盖 material-ui react 组件的 @media css