如何为所有图像设置固定大小 [英] How to set a fixed size for all images

问题描述

您好，

这是我的问题。

我有一组图片

< div id =slider> 
< img src =images / ScalesEmulator.png/> 
< img src =images / discuss.jpg/> 
< img src =images / four-main-steps-for-a-software-process-cycle.jpg/> 
< img src =images / globe.jpg/> 
< img src =images / shake-hands.jpg/> 
< / div> 

样式：

 #slider {
 float：left; 
身高：320px; 
宽度：650px; 
} 
 
 #slider img {
宽度：650px; 
身高：320px; 
} 

有一些JavaScript代码可以让它们在它们之间不断变换。问题是图像可能比我在css上设置的尺寸更小或更大，并且由于某种原因它们不会填充它们设置的空间。

到目前为止，我找不到办法做到这一点。如果我需要更改我必须在网站上放置的每张图片，我会这样做。但我希望那些对网站有更多经验的人的意见。



谢谢

解决方案

请参阅我对解决方案的评论1.



您应该始终指定宽度或高度，或者不指定任何宽度或高度。如果同时指定两者，则可能会以错误的宽高比显示某些图像。请参阅：

http://en.wikipedia.org/wiki/Aspect_ratio [< a href =http://en.wikipedia.org/wiki/Aspect_ratiotarget =_ blanktitle =New Window> ^ ]。



重新抽样可能意味着浪费交通资源。重新采样通常会产生不可接受的质量。也就是说，即使您使用CSS或< code>< img>< / img> 标签属性来修改图片的大小，您最好使用源图像在服务器端初步重新采样更接近所需的大小。将源图像文件保存为两个版本不是问题：全尺寸和缩略图版本。

-SA

在你的.css中试试这个

  img  {
  width  ：   200px;  
  height  ：   200px;  
} 

of cause设置自己的尺寸。

Hello,
Well here is my problem.
I have a group of images

<div id="slider">
    <img src="images/ScalesEmulator.png"/>
    <img src="images/discussing.jpg" />
    <img src="images/four-main-steps-for-a-software-process-cycle.jpg"/>
    <img src="images/globe.jpg"/>
    <img src="images/shake-hands.jpg" />
</div>

styled with:

#slider {
	float: left;
	height:320px;
	width:650px;
}

#slider img {
	width:650px;
	height:320px;	
}

There is some JavaScript code which will make them keep changing between themselves. The problem is that images might be either smaller or bigger than the size I set on css and for some reason they won't fill the space it was set to them.
So far I couldn't find a way to do this. If I am required to change every picture I have to place on the site, I will do it. But I would like the opinion of people that have more experience with website about my options.

Thanks

解决方案

Please see my comments to the Solution 1.

You should always specify either width or height, or none of them. If you specify both, you risk showing some of the images in wrong aspect ratio. Please see:
http://en.wikipedia.org/wiki/Aspect_ratio[^].

Re-sampling down may mean waste of traffic resources. And re-sampling up usually gives unacceptable quality. That said, even if you use CSS or <code><img></img> tag attributes to modify the sizes of images, you should better have source images on the server side preliminary re-sampled closer to the required sized. It's not a problem to keep source image files in two versions: full-size and the version for thumbnails.

—SA

try this

in your .css

img { 
  width: 200px;
  height: 200px; 
}

of cause set your own sizes.

这篇关于如何为所有图像设置固定大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！