草庐IT

适应性

全部标签

html - 高度 100% 或更高以适应内容,没有视觉伪像

作为学习现代网络开发的一部分,我正在使用Bootstrap和jQuery制作一个示例登录页面。出于演示目的,代码已简化,仅保留HTML和CSS位。想法是将多个HTML页面都放在一个页面上,每个页面都占据浏览器视口(viewport)的100%。部分问题是可移植设备上的内容通常不适合,因此height:100%不再有效,并且内容重叠。我尝试了min-height和height的各种组合,它们似乎都不起作用。我想保持响应式设计原则,尽可能缩小内容,但保持所有内容的可读性,不重叠。body{font-family:HelveticaNeue,Helvetica,Arial,sans-seri

html - 拉伸(stretch)图像以适应 td

我想在我的td单元格中拉伸(stretch)图像。怎么做。它是一个标签图像,看起来像这个|________|的倒置。我需要将图像放在包含文本“aaa”的第一个td单元格中,该单元格将位于该图像的中心。 最佳答案 不使用CSS3就无法拉伸(stretch)背景图像。在CSS3中,您有background-size属性,您可以为其提供100%拉伸(stretch)图像到容器的100%。但并非所有浏览器都支持CSS3。您可以使用图像标签并将宽度和高度设置为100%以实现此目的。 关于html-

html - 拉伸(stretch)图像以适应 td

我想在我的td单元格中拉伸(stretch)图像。怎么做。它是一个标签图像,看起来像这个|________|的倒置。我需要将图像放在包含文本“aaa”的第一个td单元格中,该单元格将位于该图像的中心。 最佳答案 不使用CSS3就无法拉伸(stretch)背景图像。在CSS3中,您有background-size属性,您可以为其提供100%拉伸(stretch)图像到容器的100%。但并非所有浏览器都支持CSS3。您可以使用图像标签并将宽度和高度设置为100%以实现此目的。 关于html-

javascript - 缩放固定宽度的字体以适应一行中恒定数量的字符

我有一个基于websocket的终端session。我希望增加字体大小以填充div,使其始终为80个字符宽。这样做的最佳方法是什么?如果有一种纯CSS的方式来做到这一点,我会很高兴,但我已经在使用jQuery,所以普通的javascript或jQuery解决方案也不错。 最佳答案 这是一个基于the8472的纯CSS示例的回答:div,textarea{width:100%;max-width:100%;box-sizing:border-box;-moz-box-sizing:border-box;font-family:"Luc

javascript - 缩放固定宽度的字体以适应一行中恒定数量的字符

我有一个基于websocket的终端session。我希望增加字体大小以填充div,使其始终为80个字符宽。这样做的最佳方法是什么?如果有一种纯CSS的方式来做到这一点,我会很高兴,但我已经在使用jQuery,所以普通的javascript或jQuery解决方案也不错。 最佳答案 这是一个基于the8472的纯CSS示例的回答:div,textarea{width:100%;max-width:100%;box-sizing:border-box;-moz-box-sizing:border-box;font-family:"Luc

html - 如何将元素包装在 flexbox 中以适应较小的屏幕?

我正在尝试为不同的调整大小创建布局。我需要在此处获得这些图像中的结果:我有这个代码:.container{position:relative;display:flex;align-items:stretch;}.item{background-color:black;box-sizing:border-box;padding:20px;flex:2;color:#fff;}.item:nth-child(2){background-color:grey;flex:1}.item:nth-child(3){background-color:green;flex:0.5;}@mediasc

html - 如何将元素包装在 flexbox 中以适应较小的屏幕?

我正在尝试为不同的调整大小创建布局。我需要在此处获得这些图像中的结果:我有这个代码:.container{position:relative;display:flex;align-items:stretch;}.item{background-color:black;box-sizing:border-box;padding:20px;flex:2;color:#fff;}.item:nth-child(2){background-color:grey;flex:1}.item:nth-child(3){background-color:green;flex:0.5;}@mediasc

html - 如何适应 span 标签内的图像?

我在span标签中有一张图片。但问题是图像不适合span标签。相反,图像的一部分超出了span标签。我想在跨度内放置该栏,即它应该与文本框相邻。我怎样才能实现它? 最佳答案 试试这个。 关于html-如何适应span标签内的图像?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/27427073/

html - 如何适应 span 标签内的图像?

我在span标签中有一张图片。但问题是图像不适合span标签。相反,图像的一部分超出了span标签。我想在跨度内放置该栏,即它应该与文本框相邻。我怎样才能实现它? 最佳答案 试试这个。 关于html-如何适应span标签内的图像?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/27427073/

php - 动态缩放图像以适应指定尺寸的宽度和高度

因此,经过广泛的研究和大量的jQuery和Javascript解决方案后,我根本找不到一种方法可以将图像在水平和垂直方向上动态缩放到指定大小,我发现了大量关于缩放以适应宽度并保持纵横比,或缩放以适应高度并保持纵横比,但无法确定图像是太高还是太矮并进行相应调整。所以在我的示例中,我有一个设置宽度为460像素,设置高度为280像素,我需要图像适合整个区域而不拉伸(stretch)(保持其纵横比) 最佳答案 现在,在摆弄了一些宽度示例之后,我的经典代数技能开始发挥作用。如果我用宽度除以高度,那么在这种情况下,460/280会得到1.642