<style>
div{
width: 100%;
height: 500px;
background-color: #00ffff;
}
svg{
width: 50%;
background-color: #ffff00;
}
</style>
<div>
<svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
<rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>
</div>
(对象SVG和img SVG不能为我的目的工作。它必须是内联的。解决方案不必是CSS...JavaScript绝对是一个可以接受的解决方案。)
基于@Paulo Coghi的答案,这对我来说是最好的答案(在几个小时的测试失败和没用的谷歌搜索之后,是谁拯救了我):
只需将svg转换为:
<svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
<rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>
进入:
<svg version="1.1" id="Layer_1" viewBox="0 0 250 400" >
<rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
// and/or whatever you want
</svg>
svg {
max-width: 100%;
max-height: 100%;
// or any other units or measurements you want
}
我已经尝试了几天,现在配置我的缩略图库,使所有的图像显示相同的高度和宽度。但是,当我将CSS代码更改为, 我得到的图像大小都一样,但纵横比被拉伸,破坏了图像。有没有办法调整图像容器的大小而不是图像?允许我保持纵横比,但仍然调整图像大小。(我不介意剪掉一些图片。)
问题内容: 有没有一种方法可以控制CSS中单选按钮的大小? 问题答案: 是的,您应该能够像设置任何元素一样设置其高度和宽度。但是,某些浏览器并没有真正考虑这些属性。 如您所见,设置单选按钮的样式并不容易:-D
问题内容: 有没有一种方法可以使用jQuery更改CSS类的属性,而不是元素属性? 这是一个实际的例子: 我上课有一个div 我想更改类背景属性,而不是已分配类背景的元素。 如果我使用jQuery .css()方法做到这一点: 它会影响现在具有class的元素。到这里为止一切都很好。但是,如果我进行Ajax调用,并在class中插入更多div ,则这些背景将不会具有绿色背景,而它们将具有初始背景。
问题内容: 使用javascript设置内联CSS值很容易。如果我想更改宽度,并且我有这样的html: 我需要做的是: 它将更改内联样式表的值。通常这不是问题,因为内联样式会覆盖样式表。例: 使用此Javascript: 我得到以下内容: 这是一个问题,因为当我有以下条件时,不仅要更改内联值,而且要在设置宽度之前先查找宽度: 返回的值为Null,因此,如果我有Javascript需要知道某种东西的
问题内容: 我需要找到一种使用JavaScript更改CSS:hover属性的方法。 例如,假设我有以下HTML代码: 以及以下CSS代码: 我想使用JavaScript将悬停属性更改为例如background:#00ff00。知道我可以使用JavaScript通过以下方式访问样式背景属性: 但是我不知道:hover的JavaScript等效项。如何使用JavaScript更改这些的:hover背
问题内容: 我正在尝试使用JavaScript更改图像的大小。jS文件与HTML页面分开。 我想在JS文件中设置图像的高度和宽度。有什么好的方法吗? 问题答案: 引用图像后,就可以像这样设置其高度和宽度: 在html中,它看起来像这样: