css而不是js [英] css instead of js
问题描述
转到 http ：//www.inetgate.ch/design.htm 但是使用Firefox，而不是IE，使用
IE它不起作用，好吧，去那里改变大小你的浏览器和
然后你看，右边的图像正在调整它的大小。我可以使用CSS在每个浏览器中使用相同的效果（当然还有干净的
css支持;））？
谢谢求你帮忙！
-
chEErs roN
我是根，我被允许这样做！ ;）
继续摇滚''
Hi,
go to http://www.inetgate.ch/design.htm but with Firefox, not with IE, with
IE it doesn''t work, okay, go there and change the size of your browser and
then you see, that the image on the right side is adapting it''s size. Can I
do the same effect with CSS which would work in every browser (with clean
css support of course ;))?
Thank you for help!
--
chEErs roN
I''m root, I''m allowed to do this! ;)
keep on rockin''
推荐答案
roN写道：
roN wrote:
转到 http：//www.inetgate .ch / design.htm 但是使用Firefox，而不是使用IE浏览器，使用IE浏览器它无法正常工作，好吧，去那里改变浏览器的大小然后你就看到了，右侧的图像正在调整它的大小。我可以使用CSS在每个浏览器中使用相同的效果（当然还有干净的CSS支持;））？
感谢您的帮助！
Hi,
go to http://www.inetgate.ch/design.htm but with Firefox, not with IE, with
IE it doesn''t work, okay, go there and change the size of your browser and
then you see, that the image on the right side is adapting it''s size. Can I
do the same effect with CSS which would work in every browser (with clean
css support of course ;))?
Thank you for help!
roN，
当然。
哦，你的意思如何，对吧？
让我们看看我是否能回忆起......
创建一个< div>。以％表示其CSS宽度（例如，你提供
的例子，让我们说40％）。
在< div>中放一个< img>。
指定< img> CSS宽度为100％。为了防止高度从
收缩，请指定CSS高度（以像素为单位）以匹配
图像的高度（在您的示例中为20px）。
< div>应自动调整到页面宽度的40％和< img>将
填充< div>的宽度，其高度不变。
确保使用严格的DOCTYPE。
有关图像尺寸问题的更多信息，请参见
http://pages.prodigy.net/chris_beall...ge%20size.html 。
Chris Beall
roN,
Sure.
Oh, you meant HOW, right?
Let''s see if I can recall...
Create a <div>. Specify its CSS width in % (for the example you
provided, let''s say 40%).
In the <div> put an <img>.
Specify the <img> CSS width as 100%. To prevent the height from
shrinking, specify the CSS height in pixels to match the height of the
image (20px in your example).
The <div> should auto-adjust to 40% of the page width and the <img> will
fill the width of the <div>, with its height unchanging.
Make sure you use a Strict DOCTYPE.
More info on image size issues can be found at
http://pages.prodigy.net/chris_beall...ge%20size.html.
Chris Beall
Chris Beall写道：
Chris Beall wrote:
roN写道：
roN wrote:
转到 http://www.inetgate.ch/design.htm 但是使用Firefox，而不是使用IE浏览器，使用IE浏览器它无法正常工作，好吧，去那里改变浏览器的大小然后你看，右边的图像正在适应<它的大小。我可以在每个
浏览器中使用CSS做同样的效果（当然还有干净的CSS支持;））？
谢谢你的帮助！
Hi,
go to http://www.inetgate.ch/design.htm but with Firefox, not with IE,
with IE it doesn''t work, okay, go there and change the size of your
browser and then you see, that the image on the right side is adapting
it''s size. Can I do the same effect with CSS which would work in every
browser (with clean css support of course ;))?
Thank you for help!
ron，
当然。
哦，你的意思如何，对吧？
让我们看看我是否能回想起...... />创建一个< div>。以％表示其CSS宽度（对于您提供的示例，让我们说40％）。
在< div>中放一个< img>。
指定< img> CSS宽度为100％。要防止高度收缩，请指定CSS高度（以像素为单位）以匹配
图像的高度（在您的示例中为20px）。
< div>应自动调整到页面宽度的40％和< img>将
填充< div>的宽度，其高度不变。
确保使用严格的DOCTYPE。
有关图像大小问题的更多信息可以在
http：//页面找到。 prodigy.net/chris_beall...ge%20size.html 。
好的，我尝试了以下方式：
http://www.inetgate.ch/new/template_css.htm
但是，正如你所看到的，图片不适合div的大小。
我想要的是什么：
右图.png的大小应该与div的大小相符。
div开头的黑线，在上面，应该在
的同一行上div本身，我该怎么把它放在那里？
div周围的红色边框，仅仅是出于开发理由看到
大小的div''n来检查它是否正在调整自己的大小。这似乎有效。
感谢您的进一步帮助！
-
chEErs roN
我是根，我被允许这样做！ ;）
继续摇滚''
Okay, I tried it the following way:
http://www.inetgate.ch/new/template_css.htm
but, as you can see, the picture doesn''t fit itself to the size of the div.
What I''d like:
the picture right.png should fit its size to the size of the div.
the black line at the beginning of the div, which is above, should be on the
same row as the div itself, how do I place it there?
The red border around the div, was only for developing reasons to see the
size of the div ''n to check if it''s resizing itself. That seems to work.
Thank you for further help!
--
chEErs roN
I''m root, I''m allowed to do this! ;)
keep on rockin''
roN写道：
Chris Beall写道：
< br>
Chris Beall wrote:
roN写道：
roN wrote:
转到 http://www.inetgate.ch/design.htm 但是使用Firefox，而不是IE，
使用IE浏览器它不起作用，好吧，去那里改变你的浏览器的大小然后你看，右边的图像正在适应它的大小。我可以在每个
浏览器中使用CSS做同样的效果（当然还有干净的CSS支持;））？
谢谢你的帮助！
Hi,
go to http://www.inetgate.ch/design.htm but with Firefox, not with IE,
with IE it doesn''t work, okay, go there and change the size of your
browser and then you see, that the image on the right side is adapting
it''s size. Can I do the same effect with CSS which would work in every
browser (with clean css support of course ;))?
Thank you for help!
ron，
当然。
哦，你的意思如何，对吧？
让我们看看我是否能回想起...... />创建一个< div>。以％表示其CSS宽度（对于您提供的示例，让我们说40％）。
在< div>中放一个< img>。
指定< img> CSS宽度为100％。要防止高度收缩，请指定CSS高度（以像素为单位）以匹配
图像的高度（在您的示例中为20px）。
< div>应自动调整到页面宽度的40％和< img>将
填充< div>的宽度，其高度不变。
确保使用严格的DOCTYPE。
有关图像大小问题的更多信息可以在
http：//页面找到。 prodigy.net/chris_beall...ge%20size.html 。
好的，我尝试了以下方式：
http://www.inetgate.ch/new/template_css.htm
但是，正如你所看到的，图片不适合div的大小。
我想要的是：
图片right.png应该适合它的大小到div的大小。div上方的黑线，也就是上面的div，应该和div本身在同一行，我该怎么把它放在那里？
周围的红色边框div，只是出于发展原因才能看到div的大小以确定是否存在调整自己的大小。这似乎有用。
感谢您的进一步帮助！
Okay, I tried it the following way:
http://www.inetgate.ch/new/template_css.htm
but, as you can see, the picture doesn''t fit itself to the size of the div.
What I''d like:
the picture right.png should fit its size to the size of the div.
the black line at the beginning of the div, which is above, should be on the
same row as the div itself, how do I place it there?
The red border around the div, was only for developing reasons to see the
size of the div ''n to check if it''s resizing itself. That seems to work.
Thank you for further help!
roN，
您没有按照我的指示行事，因此您的结果与我的不符：
- 你没有切换到严格的DOCTYPE。
- 你没有使用< img>元素，但在< div>上使用CSS背景
图像元件。 CSS规范中没有任何内容让我相信
背景图像缩放是一个可用的功能。
- 你指定div的宽度为102％，而不是100％ 。
- 你试图将所有这些都填入现有的基于表格的
模板中，而不是在整洁的环境中首先尝试它。
请参阅 http：//pages.prodigy。 net / chris_beall ... 20stretch.html
我选择将您的具体问题与您的环境分开，因为
我认为环境有助于问题。你可以：
- 弄清楚如何使解决方案适应你当前的页面或
- 重新思考当前页面的结构。
我会改变的事情：
- Transitional DOCTYPE - >严格。参见
http://pages.prodigy.net/chris_beall /TC/DOCTYPE.html 。
- 用于导航的图片 - >文本。请参阅
http：//pages.prodigy .net / chris_beall ...％20images.html 。
- 用于布局的表格 - >基于CSS的流体设计。请参阅
http：//pages.prodigy .net / chris_beall ...％20layout.html 。
如果你想在图像的左端有一条黑色垂直线，那就是
听起来像是一个边框 - 留给我，即现在的红线
会变成黑色（边框的其他三边留空）。
Chris Beall
roN,
You did not follow my instructions, hence your results do not match mine:
- you did not switch to a Strict DOCTYPE.
- you did not use an <img> element, but instead used a CSS background
image on a <div> element. Nothing in the CSS spec leads me to believe
that scaling of background images is an available function.
- you specified the width of that div as 102%, not 100%.
- you tried to stuff all of this into the existing table-based
template, rather than trying it first in an uncluttered environment.
See http://pages.prodigy.net/chris_beall...20stretch.html
I chose to separate your specific problem from your environment because
I think the environment contributes to the problem. You can either:
- Figure out how to adapt the solution to your current page or
- Rethink how the current page is structured.
Things I would change:
- Transitional DOCTYPE -> Strict. See
http://pages.prodigy.net/chris_beall/TC/DOCTYPE.html.
- Images used for navigation -> text. See
http://pages.prodigy.net/chris_beall...%20images.html.
- Tables used for layout -> CSS-based fluid design. See
http://pages.prodigy.net/chris_beall...%20layout.html.
If you want a black vertical line at the left end of the image, that
sounds like a border-left to me, i.e. the red line that is there now
would become black (with the other three sides of the border left null).
Chris Beall
这篇关于css而不是js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
