我需要使此图像拉伸到最大可能的大小,而不溢出它是<div>或歪曲图像.

我无法预测图像的纵横比,因此无法知道是否使用:

<img src="url" style="width: 100%;">

<img src="url" style="height: 100%;">

我不能同时使用两者(即style="宽度:<div>%;高度:<div>%;")因为这将拉伸图像以适应<div>.

<div>的大小由屏幕的百分比设置,这也是不可预测的.

推荐答案

2019年更新.

现在可以使用接受以下值的object-fit css属性:fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

例如,您可以使用一个容器来保存图像:

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
} 

Html相关问答推荐

R中的动态Webscraping

springBoot + Thymeleaf:基于Locale设置页面语言

小虫?CSS Flexbox间隙应用于两个内联文本块之间,因为它们之间存在绝对定位的元素

如何使用html的<;输入>;处理/绑定Angular 信号?

现代网络浏览器可以并行下载哪些类型的网络资源?还有,什么东西不能并行下载?

如何使用*ngFor将模板从父级传递到子级

根据Tailwind CSS中的子计数而非子宽度进行对齐,并水平对齐

如何防止滑动滚动元素时touch 屏出现空白区域?

为什么我不能覆盖 div 的样式?

网页爬虫:使用时光机器进行数据采集

子元素放在文本样式之后,样式会 destruct

如何使背景 colored颜色 逐渐渐变成另一种 colored颜色 ?

如何使容器的大小适合其 position:absolute; 子元素的大小

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白?

从 Vue 应用程序的容器元素渲染 HTML

css 网格创建空行和列

根据百分比用多种 colored颜色 填充SVG路径

Angular Material Hide Password 在输入时切换

无法在 css 的 body 标签中正确呈现(内联显示)

调整窗口大小时试图阻止按钮移动