有没有办法使用ONLY CSS按比例调整大小(缩小)图像？
我正在做JavaScript方式,但只是想看看CSS是否可行.
我需要将此图像拉伸到可能的最大尺寸,而不会溢出<div>或倾斜图像.
我无法预测图像的宽高比,因此无法知道是否使用:
<img src="url" style="width: 100%;">要么
<img src="url" style="height: 100%;">我不能同时使用两者(即style ="width:100%; height:100%;")因为这将拉伸图像以适应<div>.
该<div>具有的大小为屏幕,这也是不可预测的百分比来设置.
我一直在寻找解决方案,但没有运气.
我注意到我的代码是响应式的,事实上,如果我将其缩小到手机或平板电脑的大小 - 所有文本,链接和社交图标都会相应缩放.
然而,唯一没有的是我体内的形象; 它包含在段落标签中..据说,有一种简单的方法可以使图像响应吗？
谢谢!
这是我以前用我的图像显示在身体中的代码:
<body>
</center>
<p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
</center>
</body>
我想有一个网站,我可以上传不同大小的图像,以便在jquery滑块中显示.我似乎无法适应(缩小)包含div中的图像.这就是我打算如何做到的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>
<body>
<div id="wrapper">
<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>
</div>
</body>
</html>
和CSS
#wrapper {
width: 400px;
height: 400px;
border: 2px black solid;
margin: auto;
}
#im {
max-width: 100%;
}
我试图在CSS中将图像的最大宽度设置为100%.但这没有用.
我有一个大图像.我希望在它自己的网页上显示它,并且在没有任何CSS的情况下执行此操作时,它会填满整个页面并且太大而无法立即显示(滚动条出现).我想缩小它以使其适合用户屏幕的高度(而不是宽度).我已经找到了解决方案,但这些解决方案可以拉伸图像以适应整个屏幕 - 我不希望这样,因为它会破坏纵横比.
基本上,我想在保持纵横比的同时调整图像大小.我该怎么做呢？
我有一些大尺寸的照片,我想将它们设置为父级的尺寸.如果有一次父级尺寸是1200x800所以我想将照片尺寸设置为1200x800,但我也想看到整个图像.如果我的父级尺寸是500x300,那么我希望图像为500x300,依此类推.
这甚至可能吗？我想缩小图像或根据它的父级维度展开它.
谢谢!
我object-fit: cover;在我的CSS中使用特定页面上的图像,因为他们需要坚持相同height.它适用于大多数浏览器.
但是当在IE或Edge中缩放浏览器时,图像会调整width(而不是height)缩放而不是缩放.图像变形了.
我可以使用什么CSS规则来解决这个问题？
这是页面
我在这里的第一篇文章.
我正在使用div以相同的比例裁剪缩略图(180wx170h).在处理肖像和风景图像时,我会陷入困境.如果我使用这个肖像风格的图像很好:
.crop img {max-height:170px; width:auto}
..并且适用于风景图像:
.crop img {max-width:180px; height: auto;} is fine for landscape style images.
所以我基本上想要如果横向和顶部/底部如果肖像裁剪侧面.有点像优先最大高度和最大宽度.
我知道这可以通过PHP轻松完成,但我真的只知道CSS,这将是我的第一选择.
我需要保持图像的宽高比.
这<img>不像我期望的那样收缩包装min-width:100%
我试图收缩, <img>直到高度或宽度与容器匹配
单击<iframe>to切换容器形状中的任意位置
请尝试编辑
<img>CSS:1)维持宽高比
2)容器DIV的覆盖整个表面区域
3)仅编辑图像
这种中心方法看起来有点草图,但它非常强大
我的问题具体是:即使父母调整大小,也要缩放<img>父级的FILL(保持宽高比但覆盖整个表面)<div><div>
也许我可以以某种方式使用CSS flex盒布局或什么？也许是变换？
将HTML源设置为透明base64像素(信用CSS技巧)
<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
使用CSS背景属性
#img {
width: 100%;
height: 100%;
background: url(http://i.imgur.com/0BBsCUB.gif) no-repeat center;
background-size: cover;
}