CSS使图像适合容器

文章/答案/技术大牛

发布

2回答

css、image

有没有一种css方法可以将任何图像放入容器中？(保存比例) 如果图像比conteiner小，则使用min-width/-height。如果图像较大，则为max-width/-height。那么，怎样才能适应更小/更大的图像呢？显然，它不是既是min/max的。

浏览 16提问于2019-07-24得票数 0

回答已采纳

2回答

css max-width=100%属性，用于流体父容器不工作的图像

html、css

每个容器都有以百分比表示的宽度设置。我试着给下面的css，使图像比父容器更大的比例，以适应它和图像小于容器有自己的宽度。我还用width: 100%;代替了width: auto;，这解决了图像比容器大的问题。但如果图像比容器小。它变得更宽(适合100%)，图像变得模糊。

浏览 2提问于2014-03-31得票数 1

3回答

CSS:使容器适合屏幕

html、css、overflow

我在一个网站上工作，其中有两个容器:侧栏和主要内容。问题是，当最小化窗口(仅)时，左侧栏适合屏幕的当前大小，而向下滚动时，侧边栏消失。只有当内容容器(在右侧)没有填满屏幕时，才会发生这种情况。

浏览 2提问于2013-04-08得票数 7

回答已采纳

2回答

CSS图像拟合宽度和高度

html、css

我正试图使一个形象适合它的容器。问题是，我只能将其设置为适合宽度width: 100%或高度height: 100%，但不能两者兼得。基本上，它应该检查天气容器的长度或高度比图像的宽度和高度(标准化)更小，并使之适应这一点。它还应该对图像进行居中。抱

浏览 3提问于2015-06-11得票数 4

回答已采纳

4回答

使内容适合父容器

css

我决定将一些.css应用于stackoverflow.com页面，以删除侧边栏，因为我对它并不感兴趣。我面临的问题是#mainbar内容不再适合#content容器，并且由于我的css尝试使#mainbar内容适合其父容器(#content)，所以留下了很大的空白。important;} 如何使#mainbar #content 完整的内容(问题、答案、注释)适合#

浏览 2提问于2016-04-08得票数 3

回答已采纳

2回答

容器宽度适合他的子项宽度

html、css

我有一个容器(一个div)，其中包含一些其他元素(示例段落、图像等)。我想给容器的宽度赋值，以便在页面中居中。(默认行为使容器的宽度为100%，所以我不能将其居中)我发现有很多帖子谈论如何使子元素的宽度适合容器的宽度，但我知道的唯一相反的方法是使用javascript (我想避免这种情况)。有没有办法通过css做到这一点呢？提前感谢！

浏览 0提问于2012-07-10得票数 1

回答已采纳

1回答

fancybox使图像适合容器

javascript、jquery、fancybox

但我在fancybox中遇到了问题，我想将我的图像放到fancybox的容器中。(将上传照片) / PS:这是在论坛里，所以图片是随机的..$("#post_message_{vb:raw post.postid}").css({'transform': 'rotate(+90deg) translate(-56%)','transform-originbottom left','white-

浏览 2提问于2019-11-26得票数 0

4回答

如何使图像适合容器？

html、css、image、css-position

我正在尝试使用Bootstrap网格系统，每行有4列包含图像，但图像太大，它超过了它的容器，所以我设置了图像position: absolute和div position: relative，但仍然不起作用有没有办法让图片与容器的大小匹配呢？

浏览 1提问于2016-07-12得票数 2

1回答

灯箱中的响应挠性滑块

jquery、lightbox、flexslider

我想要一个柔性滑块旋转木马，安装在可用的屏幕尺寸中，因为它出现在一个灯箱里，旋转木马的图像可以是不同的大小和比例，但仍然适合滑块和屏幕。我最初研究了一些替代解决方案，其中包括：但我想要一个使用实际图像的解决方案。Flex滑块的困难在于，当您使用不同大小的图像时，关键容器(即flex)的高度由最高的图像设置

浏览 2提问于2017-11-08得票数 0

1回答

裁剪图像的中心部分以适应固定高度的容器

css

我需要居中裁剪图像，而不是拉伸图像以适应容器。我就是这样做的。当图像高度较大时，它只裁剪底部高度以适合容器，但当图像高度较小时，它不适合容器。如何居中裁剪图像并适合给定大小的容器？/images/123.jpg" /> </div

浏览 3提问于2014-04-18得票数 0

1回答

在正方形网格中显示图像(React + Material网格)

css、reactjs、material-ui

我使用React + [Material UI Grid][1]来显示我的图像，图像大小不同，我想：你可以看到下面的效果，目前

浏览 3提问于2021-01-20得票数 0

回答已采纳

3回答

显示部分图像css html

html、css

我有一个width:300px, height:400px;的图片我只想显示图像的一部分，以便它可以填充容器。类：假设左上角是0px 0px，右下角是原始图像的300px 400px。我想显示来自10px 0px(top-left) to 200px 208px(bottom-right)的图片，使它适合容器。如何在css?中这样做

浏览 4提问于2016-05-26得票数 3

4回答

使用html和css将图像添加到导航栏

html、css

我只使用纯html和css试图使图像适合于导航栏的左侧。我知道如何创建导航链接，并让所有的集装箱孩子并排，但我不知道如何使图像更小，并在一个固定的位置在肚脐。猜猜我所问的基本上是如何使图像适合容器，以及如何为它制作一个合适的容器。谢谢!

浏览 5提问于2020-12-20得票数 0

回答已采纳

1回答

如何有不同大小的图像流畅地响应CSS？

css、image、fluid、responsive

怎样才能使不同大小的图像(较高的图像)适合于容器中，并使容器具有相同的大小和流畅的响应？我使用了一个vw作为图像的高度，它将瓷砖设置为相同的大小，但会导致图像本身挤压，但这是最好的方法吗？代码笔：ul{ width:50%;li{ float:left; margin:2% 1%;

浏览 0提问于2016-04-27得票数 0

回答已采纳

6回答

用于使图像响应于包含元素的宽度和可见高度的CSS。

html、css

我需要图像来获取容器的整个宽度，除非结果的高度大于可用容器的视口高度。.img-responsive{ max-width: 100%; height: auto;我试着在图片上，或者在一个专用容器上玩“最大高度”，没

浏览 0提问于2016-12-26得票数 4

4回答

使响应图像适合父容器

html、css

我一直试图找出是否有一个纯粹的CSS解决方案，以确保我的旗帜内的图像不会低于父级的高度，而是保持图像的比率。您可以在这里看到一个演示：<div class="banner_holder"></div> o

浏览 7提问于2013-11-04得票数 7

回答已采纳

4回答

使图像适合CSS网格

html、css、css-grid

我有一个网格，我在其中定位图像，但它们没有填满给定的整个空间。我希望下面的图片能很好地说明这个问题。正如我们所看到的，顶部的图像和右侧的图像都没有填充分配给它们的行。是什么导致了这个问题?

浏览 3提问于2018-05-26得票数 6

1回答

将Wordpress图像缩放到Bootstrap内部的相同高度

css、wordpress、image、bootstrap-5、image-scaling

我想要制作一个具有相同高度的图像的水平滚动容器。我被困在一点上，我有可滚动的容器，但是图像的高度是不一样的；/*for example purposes*/ background:pink;img { max-width: 100%;<script src="https://cdnjs.clou

浏览 2提问于2022-02-20得票数 0

回答已采纳

2回答

响应式布局中居中图像

css、image、responsive-design

我正在尝试设置一个响应头，它接收图像并根据浏览器调整其大小--这很简单。我无法实现的是使图像在其容器(在本例中为a元素)内垂直居中。请参见示例：我尝试了一些css技巧，但都不起作用，还有一些jQuery。如果有人知道哪种类型的解决方案，这两种类型的解决方案都适合。

浏览 1提问于2012-03-30得票数 0

回答已采纳

1回答

尺寸未知时如何将img放入div

image、css-float、css

我有一个小的div (例如200px x 200px)和一些动态显示的图像:横向、纵向或全景尺寸(例如600px X 300px；200px X 600px；2000px X 300px)我需要用CSS我有： <img />和CSSwidth: 200px;overflow:hidden}min-height

浏览 3提问于2013-06-18得票数 0

点击加载更多