html - 图像 - CSS、HTML

标签 html css image

<分区>

我正在尝试显示图像,但遇到了一些问题。

我的图片尺寸不同,我希望了解避免分辨率问题和布局空间问题的最佳方法。

你看我有更大/更小的图片,我需要 400 x 360 像素的图片...有些会被拉长,有些会变得怪异。(尝试将一张大图片缩小成一张小图片)

如果您获得不同尺寸但在网站布局上有固定空间的图像,那么处理图像的最佳方式是什么?

我尝试了可能的解决方案,但它仍然延伸......

 #divDisplayingImg img{
   width:500px;
height:360px;
border:solid medium white;
border-radius:5px;
border-width:8px;
background-size: cover;
overflow:hidden;
   }

最佳答案

我不太确定您所说的“图像变得很奇怪”。如果你有不同比例的原始图像,那么,为了防止失真,你应该使用

最大宽度:450px;最大高度:360px;

它将保留原始比例并有助于避免可能的失真。

关于html - 图像 - CSS、HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19252637/

上一篇:html - 相对 block 不考虑 div 中的顶部定位

下一篇:css - 如何防止 td 元素在表格行中换行

相关文章:

css - 宽度 : 100%; height: auto dont work properly

html - span inside anchor 不起作用,有什么想法吗?

html - 溢出隐藏的div

html - 这个标记有什么 "wrong"吗?

javascript - 如何在 css 中将 <ul> 放在图像周围

javascript - 正则表达式以像素为单位转换所有 rem-calc

python - 如何使用OpenCV检测具有相同颜色的像素区域

javascript - (Javascript) 使用文件路径创建一个 File 对象

Javascript : store an image in the browser, 然后在 Markdown 中使用它

html - 在导航栏中的链接之间放置一个点