将图像缩小 57% 并在 css 结构内居中

发布于 2024-08-26 06:46:08 字数 2045 浏览 13 评论 0原文

嘿，我真的被困住了。我会一步一步地进行，希望能简短一点。

这是 html 结构：

<li class="FAVwithimage">
     <a href="">
     <img src="pics/Joshua.png">
     <span class="name">Joshua</span>
     <span class="comment">Developer</span>
     <span class="arrow"></span>
     </a>
</li>

在粘贴 css 类之前，先介绍一些有关要实现的确切目标的信息：

将图片 (img) 大小调整 57%。如果用css无法完成，那么jquery/javascript解决方案。例如：原始图片是240x240px，我需要将其调整57%。这意味着 400x400 的图片在调整大小后会更大。
调整大小后，图片需要居中内部垂直和水平：68x90 边界。所以你有一个 LI 元素，其中有一个 A 元素，在 A 内部我们有 IMG，IMG 大小调整了 57% 并且在最大宽度可以居中的位置
当然是 68px 和最大高度 90 像素。不可以，我正在添加 IMG 周围有一个 SPAN 元素。

这就是我的想法：

<li class="FAVwithimage">
     <a href="">
     <span class="picHolder"><img src="pics/Joshua.png"></span>
     <span class="name">Joshua</span>
     <span class="comment">Developer</span>
     <span class="arrow"></span>
     </a>
</li>

然后我会给出 span 元素：display:block 和 w=68px，h=90px。但不幸的是这不起作用。

我知道这是一篇很长的文章，但我已尽力将其描述得非常简单。下面是 css 类和图片，看看我需要什么。

li.FAVwithimage {
height: 90px!important;

这

li.FAVwithimage a, li.FAVwithimage:hover a {
height: 81px!important;

就是

相关的。我还没有包含以下类：名称、评论、箭头

现在这些类不完整并参考 IMG。

li.FAVwithimage a span.picHolder{
/*put the picHolder to the beginning 
  of the LI element*/
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 90px;
diplay:block;
border:1px solid #F00;

边框

只是临时用来显示实际的 picHolder。现在在 LI 的开头，宽度和高度已设置。

li.FAVwithimage span.picHolder img

{
最大宽度：68px！重要；最大高度：90px！重要； } 这是应该将图片缩小 57% 并在 picHolder 中居中的类

这里我有一张描述我需要的图形：

替代文本 http://lookpic.com/i/169/2U12JC16.jpeg

原文

Hy, i'm really stuck. I'll go step by step and hope to make it short.

This is the html structure:

<li class="FAVwithimage">
     <a href="">
     <img src="pics/Joshua.png">
     <span class="name">Joshua</span>
     <span class="comment">Developer</span>
     <span class="arrow"></span>
     </a>
</li>

Before i paste the css classes, some info about the exact goal to accomplish:

Resize the picture (img) by 57%. If it cannot be done with css, then jquery/javascript solution. For example: Original pic is 240x240px, i need to resize it by 57%. That means that a pic of 400x400 would be bigger after resizing.
After resizing, the picture needs to be centered
vertical&horizontal inside a: 68x90
boundaries. So you have an LI element,
wich has an A element, and inside A we
have IMG, IMG is resized by 57% and
centered where the maximum width can
be of course 68px and maximum height
90px. No for that to work i was adding
a SPAN element arround the IMG.

This is what i was thinking:

<li class="FAVwithimage">
     <a href="">
     <span class="picHolder"><img src="pics/Joshua.png"></span>
     <span class="name">Joshua</span>
     <span class="comment">Developer</span>
     <span class="arrow"></span>
     </a>
</li>

Then i would give the span element: display:block and w=68px, h=90px. But unforunatelly that didn't work.

I know it's a long post but i'v did my best to describe it very simple. Beneath are the css classes and a picture to see what i need.

li.FAVwithimage {
height: 90px!important;

}

li.FAVwithimage a, li.FAVwithimage:hover a {
height: 81px!important;

}

That's it what's relevant. I have not included the classes for: name,comment,arrow

And now the classes that are incomplete and refer to IMG.

li.FAVwithimage a span.picHolder{
/*put the picHolder to the beginning 
  of the LI element*/
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 90px;
diplay:block;
border:1px solid #F00;

}

Border is used just temporary to show the actuall picHolder. It is now on the beginning of LI, width and height is set.

li.FAVwithimage span.picHolder img

{
max-width:68px!important;
max-height:90px!important;
}
This is the class wich should shrink the pic by 57% and center inside picHolder

Here I have a drawing describing what i need:

alt text http://lookpic.com/i/169/2U12JC16.jpeg

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

櫻之舞 2024-09-02 06:46:08

我不知道你在谈论 57% 是什么 - 从你的例子来看，你想要缩放以适应 68x90，而不是具体的 57%。据我所知，使用 max-width 和 max-height 可以解决这个问题（尽管在 IE6 中不起作用，而且我认为没有非 JS 的解决方法）。但为什么你期望它居中呢？

当您确实知道父级的大小时，将您不知道其大小的图像居中的最简单方法是在父级上进行设置：

text-align: center;
line-height: 90px; /* height of parent */
vertical-align: middle;

但是，这样做的一个问题是，如果用户增加字体大小，则行高随之增加，使得图像不再垂直居中。

对于绝对定位，我假设您在 li 上有 position:relative？另外，您可能可以使用 float: left; 代替（但当然您需要在 li 末尾添加一个带有 clear: left; 的元素）。

I don't know what you're talking about with the 57% - from your example, you want to scale to fit within 68x90, not 57% specifically. As far as I can tell, using max-width and max-height works for that (though won't work in IE6, and I don't think there's a non-JS workaround for that). But why do you expect it to be centered?

The easiest way to center an image you don't know the size of, when you do know the size of the parent, is to set on the parent:

text-align: center;
line-height: 90px; /* height of parent */
vertical-align: middle;

One problem with this though, is that if the user increases the font size, the line-height increases along with it, making the image(s) not centered vertically anymore.

For the absolute positioning, I assume you have position: relative on the li? Also, you could probably use float: left; instead (but of course you'd need an element with clear: left; at the end of the li then).

回复收藏 0 原文