个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试调整图像大小但不将其增加到超过其原始大小 - 我还想将图像置于其容器的中心。这是最好的方法，因为它有时看起来有点生涩？
我把jquery js链接去掉了
<html>
<head>
<style type="text/css">
.container {
width: 100%;
height: 100%;
background: #444;
}
</style>
</head>
<body>
<div class="container">
<img src="D:\large.png" />
</div>
</body>
<script>
var $orig_width=0;
var $orig_height=0;
var width;
var height;
var $img;
$(window).load(function() {
$img = $('.container').find('img');
$orig_width=$img.width();
$orig_height=$img.height();
resize();
});
function resize() {
var width=$img.width();
var height=$img.height();
var parentWidth = $img.parent().width();
var parentHeight = $img.parent().height();
newWidth = parentWidth;
newHeight = newWidth/width*height;
if (newHeight>$orig_height) newHeight=$orig_height;
if (newWidth>$orig_width) newWidth=$orig_width;
margin_top = (parentHeight - newHeight) / 2;
margin_left = ((parentWidth - newWidth ) / 2);
$img.css({'margin-top' :margin_top + 'px',
'margin-left':margin_left + 'px',
'height' :newHeight + 'px',
'width' :newWidth + 'px'});
}
$(window).resize(function() {
resize();
})
</script>
</html>
最佳答案
您只需使用表格作为容器。因为你很容易在表格中对齐它。将固定宽度和高度设置为属性将带来固定尺寸图像的解决方案。
关于jquery - 按纵横比调整图像大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9275279/
25
4
0
我有一张 table 。我希望它的数据垂直和水平居中。 我使用了 align="center"valign="middle" ，但它没有用。
我是一名优秀的程序员,十分优秀！