如何缩小img以适应其flex容器？
要将img缩小以适应其flex容器，可以使用CSS中的flex属性和object-fit属性。
- 使用flex属性：在父容器中设置display:flex;来创建flex容器，然后可以使用flex子属性来调整子元素的大小。为了缩小img元素，可以给它的父容器设置flex: 0 0 auto;，这样它将根据其内容的实际大小进行缩小。
示例代码：
<div style="display: flex;">
<div style="flex: 0 0 auto;">
<img src="your_image_url" alt="image" />
</div>
</div>- 使用object-fit属性：object-fit属性可以控制img元素在其容器中的尺寸适应方式。可以将object-fit设置为contain或scale-down，使得图像在保持其原始比例的同时缩小以适应容器。
示例代码：
<div style="width: 200px; height: 200px;">
<img src="your_image_url" alt="image" style="object-fit: contain; width: 100%; height: 100%;" />
</div>请注意，以上是使用CSS来缩小img元素以适应其flex容器的方法。
相关·内容
我试图使用margin 0 auto将父div内的一个div (在列模式下显示flex )中的一个div水平地居中。当我这样做时，内部div就会缩小到其内容的大小。有人能解释一下为什么会发生这种情况吗?如何解决这个问题？
<div class="container">
<div class="mydiv">
CENTER THIS DIV
</div>
</div>
CSS
.container{
background-color: brown;
heig
浏览 2提问于2020-09-16得票数 0
回答已采纳
flex boxes新手。我有一个有两个盒子的弹性盒子。第一个框应该包含一个图像和第二个两个<p>文本。我希望第一个框与图像一起调整大小，以便在缩小图像大小时不会在区域周围留下额外的空白。我尝试使用flex的收缩属性，但似乎不适合在缩小图像时减小flex框的大小。有人能帮上忙吗？ .headlineContainer{
display:flex;
border: red 2px solid;
}
#myPhoto{
border: blue 2px solid;
flex: 0 1 auto;
}
#myPhoto>img{
height:
浏览 18提问于2020-08-23得票数 2
回答已采纳
1回答
仅供参考，我是Flex新手。
我正在尝试创建一个Flex应用程序，它可以根据它包含的组件的大小自动缩小，这样用户就可以将它缩小到最小的视图，以查看嵌入它的HTML页面的更多内容。
我知道如何使用ExternalInterface更改整个应用程序的大小，但我很难自动计算出当某些内容被隐藏或显示时，大小发生了多大变化。
例如：
假设我有以下flex布局：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006
浏览 1提问于2010-03-17得票数 0
1回答
我在试着缩小容器内的所有东西。我有图像，需要保持一定的宽度和高度。然而，如果屏幕变小，所有图像都开始失去位置，内容开始缩小，大小开始变化。我知道图片/内容会很难看到。
我使用的引导带4与HTML和CSS是引导，而非填充只是删除默认的cols提供的填充。
<div class="container" style="min-width: 100%;">
<div class="row main-stage" id="main-stage" style="justif
浏览 0提问于2021-04-06得票数 0
回答已采纳
? .topbarContainer {
height: 50px;
background-color: var(--main-color);
border-bottom: 2px solid rgb(235, 80, 106);
display: flex;
align-items: center;
position: sticky;
top: 0px;
z-index: 999;
overflow-x: hidden;
} 如你所见，我已经为顶部栏设置了高度。它应该始终是50px。但当窗口变得非常窄时，它不再考虑50px的固定高度，而只是与窗口
浏览 57提问于2021-07-21得票数 0
回答已采纳
1回答
在具有属性display: flex的菜单下面有一个子菜单，列表项具有属性flex-grow: 1。
我想对齐子菜单，以便链接与父菜单对齐，如下所示：
这是有效的，因为我给了子菜单属性left: 19px。这是可行的，但问题是，由于菜单及其项显示为flex，所以当浏览器缩小列表项的宽度时，列表项的宽度会随之缩小，因此子菜单不会对齐。下面是浏览器缩小200 is时的屏幕截图：
是否有css类或我可以做的任何事情使子菜单链接与浏览器收缩上的父链接对齐？从技术上讲，我可以进行大量的媒体查询并更改left:，但我想问是否有人有更好的解决方案。
这是我的密码。我去掉了很多东西，但留下
浏览 2提问于2016-11-14得票数 1
回答已采纳
在这支笔/小提琴中，我为演示目的创建了一个非常非常简单的页面布局：
在浅蓝色的"content"-area中，我有一个带有类flex-container的div，它包含一个标题和一个div嵌套的图像。
<div class="content">
<div class="flex-container">
<h1>Nice Image</h1>
<div>
<img src="http://loremflickr.com/800/
浏览 1提问于2017-09-06得票数 3
回答已采纳
我有以下HTML和CSS： .box-1 {
background: #e51400;
}
.box-2 {
background: #fa6800;
}
.box-3 {
background: #f0a30a;
}
.box-4 {background: #e3c800; }
.box-5 {background: #a4c400;}
.box-6 {background: #60a917;}
.box-7 {background: #00aba9;}
.box-8 {background: #1ba1e2;}
.box-9 {background: #aa00ff;
浏览 76提问于2021-10-26得票数 0
回答已采纳
5回答
我一直在尝试用 里面放了几张图片 元素，但这似乎一点也不影响它们。 属性的所需值。 属性将为 ，但到目前为止，其他值似乎都不起作用。 当我改变它的价值时，它们不会缩小，不会增长，不会...什么都没有。 如果您看到CodePen，就会发现两行之间有空格，并且图像占用的空间/高度并不完全相同(与预期的情况一样 )。 这是一个CodePen body{
margin: 0 auto; padding: 0;
}
main{
min-height: 70vh;
padding: 0;
}
main > section.posts{
box-sizing: border-box;
浏览 90提问于2015-12-13得票数 79
回答已采纳
9回答
使用CSS flex box模型，如何强制图像保持其纵横比？
JS小提琴：
请注意，为了填充容器的宽度，图像会拉伸或收缩。这很好，但我们是否也可以让它拉伸或缩小height以保持图像比例？
HTML
<div class="slider">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
浏览 106提问于2015-06-12得票数 122
回答已采纳
1回答
我试图实现一个与屏幕高度成比例的标题，并包含一个带有标题的图像。尝试的解决方案使用了行flex布局。其意图是让标题占视口/父级高度的比例(20%)。图像的宽度和其父图像的宽度应该根据图像的纵横比匹配缩放的图像宽度。标题的父div应该占用剩余的宽度并增长以填充任何可用的水平空间。
集装箱采用高度成比例的固定定位。
Chrome 54和Firefox 50中的实际行为是，图像的父元素占据容器宽度的大部分，这个宽度是由图像的实际宽度(而不是图像的缩放宽度)决定的。当图像缩小到那个宽度的一小部分时，我不明白这一点。
这里再现此行为的示例：
HTML：
<div class="contai
浏览 1提问于2016-11-21得票数 3
我目前正在做一个关于这个的教程。该网站是德语，但只需看看代码和上面的图片。我想做一些类似的事情，<div>在<p>上面，但是我的图像的大小要大得多，所以我尝试用width和height来缩小它，但是它不起作用。我想不出怎样才能让它适合那个浮动元素。
提前谢谢你！！
html：
<body>
<h1>Heading 1</h1>
<div id="picture">
<img src="images/picture.jpg" alt="photograph"
浏览 0提问于2018-10-05得票数 0
回答已采纳
1回答
我有一个固定高度的容器，我想在里面显示一个图像和一个标题。要求图像应该缩放以适应可用的高度，同时保持高宽比。标题可以是可变高度的。
下面是一个JS小提琴，我有到目前为止。我无法使图像的左右两边的空白消失(我在img标记中添加了一个边框以显示我的意思)。是否可以删除多余的空白？
HTML
<div class="container">
<div class="item">
<img class="image" src="https://www.stockvault.net/data/2009/07
浏览 3提问于2021-03-06得票数 0
回答已采纳
1回答
如何修复图像重叠引导
、、、、
我已经写了一个node.js代码来显示3个图像，我正在使用bootstrap来设置这些图像的样式，但是当我使用col mid-“any number”时，它们是重叠的。
<% include partials/header %>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>Welcome to our locations</h1>
浏览 16提问于2019-03-26得票数 3
回答已采纳
1回答
带有图像的按钮的大小
、、、
在我的应用程序中，我有两个相同类型按钮的实例(我自己创建的一个类，它是button的子类，设置了一个特定的UIID，还做了其他一些事情……)
它们中的一个被添加到作为BorderLayout中的中心添加的BoxLayout Y中。BoxLayout中的另一个组件是按钮上方的标签。
另一个被添加到另一个BorderLayout中作为GridLayout添加的南。网格是1行3列(按钮是其中的一列)。水平尺寸足够大，因此不需要将其缩小以适合水平尺寸。
我的问题是这两个按钮的大小不同。第一个比第二个大得多。我怀疑第二个已经在过程中的某个地方变小了，但我不明白为什么。我希望第一个按钮与另一个按钮的大小相
浏览 0提问于2015-11-26得票数 1
我正在尝试包含一个具有以下尺寸的图像:宽450像素高250像素在高度为60px的页眉的左下角；但是它不会停留在页眉div中，我甚至看不到添加轮廓后的页眉div。我的目的是缩小它，以适应标题，但仍然能够保持其纵横比。以下是应用的样式： * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*----------------------------------------------
header
---------------
浏览 13提问于2020-04-01得票数 0
因此，基本上我有一个包含2个单元格的表格行，第一个单元格(在左边)包含文本，而右边的单元格包含一个图像。虽然屏幕变得越来越小，但我希望图像最终移动到文本下面。经过一些研究，我终于找到并理解了display和flex属性是如何工作的，并解决了这个问题。 在我插入的表行属性中 display: flex;
flex-wrap: wrap; 例如，对于每个单元格，都放入flex: 1 1 10ch;。我找到了这个here，它可以解释更多更好的东西。 所以，现在我想要的是当图像在文本下重新定位时，当屏幕变得比图像本身小时缩小。图像的大小是固定的，因为百分比只是变得更小，并且不会重新定位。我也尝试过m
浏览 17提问于2020-09-17得票数 0
1回答
我的处境：
我建议从结果窗口弹出。
我有一个垂直的flex容器，它包含两个项目。第二个项目也是一个垂直的挠性容器。它包含几个项目，它们是水平的灵活容器。这些水平容器包含两个项目。其中一个项目包含一个图像，设置为高度:100%。另一项设置为填充剩余空间。
视觉表征
灰色=顶层垂直挠性集装箱
绿松石=固定项目
绿色=第二个垂直柔性集装箱
黄色=水平挠曲容器
red =包含图像的flex项
暗紫色=图像
洋红=指定用来填补空空间的挠性物品
期望:包含图像的项目缩小到包含高度:100%的图像，第二个图像扩展以填充空间。
实际结果:项目是图像的自然宽度，并且
浏览 1提问于2017-10-04得票数 0
有一张咖啡杯的图片。我试图实现一个功能，即使窗口大小被降低，咖啡杯的图像仍然是可见的，而且它的实际大小也没有变化。
目前正在发生的情况：
上面的图片是我还没有开始缩小窗口宽度的初始状态。
在这幅图中，我们可以看到，直到图像的左边有了边缘，然后在缩小窗口大小时，左右空间都均匀地缩小，但在那之后，左侧变得静止，只有右边开始减少，使杯子消失。
下面是css代码：
.App {
text-align: center;
border: 2px solid black;
width: 70%;
margin: auto;
}
以下是反应代码：
<div class
浏览 2提问于2022-04-16得票数 0
回答已采纳
我在一个挠性盒子里有个按钮。我想占用尽可能多的空间，但我也希望这个柔性盒有一个分钟的高度，因为在你点击这个按钮后，它将被动态文本所取代。如果这个动态文本真的很长，我想要弯曲框，使其在高度上增长，这样所有的文本都适合。
以下是我尝试过的：
<div class="container">
<button disabled="" tabindex="0"> Text </button>
</div>
.container {
display: flex;
flex-directi
浏览 2提问于2020-06-17得票数 0
回答已采纳
基本上，我有一个布局，在父元素中有3个元素，并显示:flex。
<div class="flex">
<div class="titleContainer">Title</div>
<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
<div c
浏览 1提问于2022-04-27得票数 0
我试着用一系列等高的，但是我的代码不能工作。我读到过，这个问题应该通过向子元素添加"display: flex“来解决，但是我已经有了，但是它不起作用。我以为给孩子添加"height: 100%“就能解决这个问题，但这也没什么用。
.card-container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
.card {
flex: 0 1 100%;
max-width: 350px;
浏览 0提问于2021-03-20得票数 0
1回答
我的项目框出现在水平行中，并无限地向右延伸，而不是以三排的形式出现。它们最终以一条长的水平线呈现在视口外。
小提琴：
项目框：
<div class="card-container">
<div class="card-top learn">
<img class="card-top.create card-top" src="<%= Citybuilder.ProjectPic.url({@post.project_pic, @post}) %>"
浏览 1提问于2017-10-01得票数 1
回答已采纳
我希望图像和文本显示在同一行，并使图像收缩和保持在窗口收缩。
下面是CSS代码。我希望当窗户缩小时，图像会缩小。
.body1 {
display: flex;
flex-wrap: wrap;
background-color: #3803f6;
color: white;
align-items: center;
justify-content: space-between;
height: 500px;
padding: 0px;
margin: -10px;
position: relative;
height: 100%;
justif
浏览 2提问于2022-08-04得票数 0
1回答
我想添加一个从引导到我的页面上的旋转木马，但是它真的让我很难在每个屏幕上设置它，当它在移动上看起来很好的时候，然后在大屏幕上它会增加图像和剪裁。我已经不知道有多少不同的方式，我已经想让它看起来正确。
<div class="row container-fluid">
<div id="slide" class="col-12 col-md-6">
<div id="carouselExampleIndicators" class="carousel
浏览 10提问于2022-12-03得票数 0
1回答
我正在尝试将表格样式(我不能更改HTML)作为响应性流动的柔性盒，而不会留下空白。
我在宽屏上的开场白
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| w | x | y | z |
+---+---+---+---+
当我缩小屏幕时，我得到的是：
+---+---+---+
| A | B | C |
+---+---+---+
| D |
+---+---+---+
| w | x | y |
+---+---+---+
| z |
+---+
我想要的：
+---+---+---+
| A | B | C |
+---+
浏览 1提问于2016-11-18得票数 3
回答已采纳
我试着对齐柔印盒中的每一项，不知怎么我不能把它们一分为二地包装起来。我有一个盒子，左边有图像，右边有文字。我尝试了一些东西，比如display: flex; flex-wrap: wrap或更改宽度，以及其他建议的在线方式，但是它根本没有改变任何东西。不管发生什么，它都和1x4一样。我怎样才能解决这个问题？下面是我的代码：
.secondContainer {
display: flex;
flex-wrap: wrap;
}
.flex-item {
display:flex;
align-items: center;
}
.flex-item img
浏览 3提问于2020-10-11得票数 0
回答已采纳
2回答
body {
-webkit-font-smoothing: none;
background: url('../img/logo.png') top left;
}
引导-CSS:我想创建一个身份验证页面，我想使用图像logo.png作为背景，但我无法使图像适应屏幕。例如，如果我缩小了窗口的屏幕，图片仍然具有相同的大小。非常感谢你的帮助！
浏览 19提问于2022-09-24得票数 0
2回答
我正在使用flexbox在页面上居中项目，也在一行中居中项目。我必须处理行中可能很大的图像，所以我使用max-width=40%来缩小图像的大小。但是，当我这样做时，适用行的flexbox不会缩小以适应新的图像大小，但会保留该大小，就好像图像仍然是max-width=100%一样。如何使flexbox行更小，以说明40%的最大宽度属性？ 下面是当前的html代码： <div style="display: flex; flex-direction: column; align-items: center;">
<label>This is my
浏览 19提问于2020-12-28得票数 0
1回答
我有一个在左边包装图像的div和一个在右边包含文本的div，两者之间有一些边距。当窗口大小缩小时，我希望文本在最大宽度和最小宽度之间收缩，图像同时收缩，以便它们彼此相邻，并且只有在文本缩小后才会跳到图像下方。
但实际情况是，文本一碰到图像，就会跳到下面，而不是缩小到最小宽度，并试图停留在图像旁边。
我的代码是这样的：
<div class="container">
<img class="headshot" src="..." />
<div class="bio-text">
浏览 3提问于2018-02-18得票数 0
回答已采纳
1回答
我目前正在尝试创建一个由三个等高列组成的行，其中所有div都将与最高的div相同，也就是文本最多的div。我试过增加柔力:1和高度: 100%，但我似乎不能让这些家伙达到同等的高度。这是我目前正在尝试的代码。您可能必须扩展宽度，才能使它们排成一行。
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.42857143;
color: #565757;
}
.internal-icons-icon
浏览 4提问于2022-02-27得票数 0
有人能告诉我，如果这是一个没有文档的错误与柔性盒，或我只是做错了？我在一个div容器中有3张图像排成一排。这是很简单的，因为它得到了人们。
没有任何超链接，所有3个图像缩小完美，他们应该。
<div style="width: 100%; margin: 0 auto; display: flex; justify-content: center;">
<a href=""><img src="flash-tooltip.png"></a>
<img src="html-too
浏览 0提问于2018-05-26得票数 1
回答已采纳
2回答
我有一个问题，我花了很多时间在上面，根本找不到解决办法。我将链接CodePen中的代码。它只是我布局的一个子集。这就是一些根元素的样式化的原因。
基本上，我有一个布局，页面/屏幕/窗口不应该有滚动，但是当有足够多的元素超出表的预期区域时，表小部件的内部就应该有。
基本上，我在页面上有一个顶部的内容，还有一个表小部件。表小部件将占用屏幕的其余空间。该表有一个标题和一个标题。主体将占据表空间的其余部分，当它有超出该空间的元素时，将有一个滚动。
我通过堆栈溢出搜索了许多资源，并尝试了许多事情。我将在笔中提供布局的当前状态。在这里，你可以看到所有我认为是我最好的尝试。
感兴趣的中心区域是.body元
浏览 0提问于2019-05-24得票数 2
回答已采纳
这些图像一个接一个地显示，而不是在水平线上，不知道为什么。只需要它们水平对齐……
HTML
<div id="detail_image_wrapper">
<div class="detail_images">
<img id="left_detail" src="images/LeftDetailImg.png" alt="Phone image">
</div>
<div class="detail_imag
浏览 3提问于2013-11-12得票数 0
1回答
我试图只是一些动态的内容，以便它适合在标签上打印。
标签有一行(.symbolContainer)，可以包含0或多个图像。如果.symbolContainer框的内容需要更多的空间，则目标是缩小.text和这些图像。
编辑：图片行不应该包装，而是从75 of缩小到最小25 of。
在我看来，flexbox是可行的，它最终得到了3层嵌套的flexbox，但是.symbolContainer内部的图像不会缩小。
.text div的内容可以溢出.body div，但是我会在.body之后调整字体大小。
它是可以做到这一点与柔印盒或其他技巧？
以下是我迄今所做的工作。CSS中的注释是我想要做的。
浏览 2提问于2018-02-19得票数 0
1回答
我有一个选项卡面板，并在其中我添加了一个网格面板。现在，当我调整浏览器窗口的大小时(就像在“缩小”中一样)，我想要缩小网格列和所有其他组件，并调整大小，以便它可以以任何窗口大小显示视图。我该怎么做呢？
我使用的是sencha-architect2 2
Ext.define('App.view.ExView', {
extend: 'Ext.tab.Panel',
autoRender: true,
autoShow: true,
frame: true,
height: 600,
id: 'mainpan
浏览 0提问于2012-07-15得票数 1
回答已采纳
我花了几个小时隔离这个bug。但我还是想要理解它。
下面是我能复制bug的最小代码量：
<div style='display: inline-flex;'>
<img width=100% src='foo.jpg'>
</div>
为了实现代码片段，我将图像名称和路径更改为foo.jpg，但其他内容与输出以下内容完全相同。
移动性：
桌面(移动模拟)：
桌面(正常)：
那么，这里发生了什么？我做了什么不恰当的事吗？有没有一种“正确”的方式来编写这个代码片段，这样所有的浏览器都能以正确的
浏览 1提问于2021-03-14得票数 2
1回答
当我在谷歌上搜索学习flex时，我在某个地方找到了代码。我正在通过修改代码来学习它。然而，我不能修复缩略图和它上面的图像的对齐方式，以响应的方式匹配相同的宽度。一个图像向图像的右侧移动了一点。我试着给父母的宽度为75vmin，但这不起作用。
就是这里
<div class="container">
<section class="product-image col">
<ul class="slides">
<li id="slide1"><img sr
浏览 1提问于2018-06-17得票数 0
1回答
我试图在一个单独的、可滚动的行中为摄影组合对齐我的图像，还想使它们响应窗口调整大小和其他屏幕大小。本质上就是让它们随着屏幕的变化而缩小和增长。以前，我把它们放在可滚动的行中，但现在我已经尝试让它们响应，它们只是调整和缩小，没有滚动显示整个图片库，但是它们都很小，因为它们都试图安装在窗口中。
到目前为止，我的情况如下
img {
display: block;
width: 100%;
transition: .3s;
}
.flex-container {
display: flex;
padding: 5px;
transition:
浏览 1提问于2021-08-12得票数 0
回答已采纳
2回答
我试着在一个灵活的容器里并排放3张图片，但是这些图片太大了，它拉伸了页面，创建了一个卷轴bar.Tried，这是使用flex包装的提示，但这不是work.Should，我只是在photoshop中重新调整大小？
。
<section class="main-content">
<div class="image">
<img src="img/devil-ivy-can.jpg">
</div>
浏览 4提问于2022-11-07得票数 0
回答已采纳
1回答
在我的项目中，容器中的所有图像都具有css属性max-width: 100%;和height: auto;，以便在视口缩小和容器缩小时缩小图像。这是可行的，但要付出的代价是浏览器无法正确地绘制页面，而不加载图像以获取尺寸。当我通过<img width=100 height=100 />嵌入图像时，浏览器normaly保留空间并呈现页面的其余部分。一旦应用了上面提到的css，图像下面的站点内容就会“跳转”，因为在加载过程中图像是0x0px。这就引出了两个问题：
有没有一种方法可以在不破坏正常占位符行为的情况下使用极大值和100/高度自动技术？
如果不是，什么是正确的类声明，
浏览 8提问于2017-11-02得票数 0
2回答
我如何才能得到一个图像，以保持在我的柔性盒的界限内？
当方框膨胀时，图像的宽度和高度应该增大/缩小，这样就没有绝对值了。
使用宽度时，高度100%会使图像倾斜。
我不想隐藏过多的内容。
只适用于所有浏览器的CSS解决方案。
基本上，我想要的是一些东西，把图像保存在它的父柔盒里，保持图像的纵横比。
.container {
display: flex;
height: 40px;
width: 100%;
}
.inner {
flex-basis: 100px;
background: gold;
}
.empty {
backgroun
浏览 1提问于2017-03-23得票数 2
1回答
我想创建一个flex网格，如下所示：
-------------------------------
| Menu | Header Image |
| |-----------------------
| | Content |
-------------------------------
所以我有这个：
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100px;
justify-content: sp
浏览 0提问于2022-02-13得票数 0
回答已采纳
我有一个包含flex类的父容器和两个包含图像的子容器(一个包含img-container-1类，另一个包含img-container-2)： <div class="flex">
<div class="img-container-1">
<img
src="https://cdn.pixabay.com/photo/2021/06/27/14/32/raspberry-6368999_960_720.png"
alt="image
浏览 20提问于2021-08-17得票数 2
1回答
我使用Laravel 从数据库中检索图像，并在我正在创建的博客应用程序中显示它们。我决定使用'iframe‘标签，以便在博客中检索和显示图像、和视频。然而，我遇到的问题是CSS相关的，我正在尝试对'iframe‘进行样式设计，这样它就可以将其大小调整到不同大小的图像和视频，并同时保留它们的纵横比。
现在，小图像显示良好，但如果我使用大尺寸的图像，任何宽度大于800 if，图像将不会保持其纵横比和/或被剪裁。
视图(Laravel文件)：
<div class="blog_img_container">
<iframe class="
浏览 2提问于2015-01-08得票数 0
我有一些幻灯片，在这些幻灯片中，我试图使用display: flex来相等空间内容，但是它在内容下面和导航上方添加了一个大的空白区域。
当屏幕缩小到移动大小时，空区域变得更加明显。
我不知道它为什么要这么做，也不知道为什么将display: flex切换到display:table会使事情变得更糟。
花了两天之后，我来寻求一些指导。
这是我所拥有的。单击1-4，使用flex进入屏幕.
<div class="slide" id="slide-one" data-slide="1">
<p class="deck
浏览 1提问于2016-06-27得票数 3
我正在尝试设置一个具有三列的flexbox布局，其中左右两列具有固定的宽度，中间的列可以弯曲以填充可用的空间。
尽管为列设置了尺寸，但它们似乎仍然随着窗口的缩小而缩小。
有人知道怎么做到这一点吗？
我需要做的另外一件事是根据用户交互隐藏右边的列，在这种情况下，左边的列仍然保持其固定的宽度，但是中间的列将填充其余的空间。
#container {
display: flex;
justify-content: space-around;
align-items: stretch;
max-width: 1200px;
}
.column.left {
浏览 2提问于2014-05-22得票数 347
回答已采纳
2回答
我有一个基于柔性盒的布局，两个面板(顶部和底部)分别占据1/3和2/3的视口。(实际上还有更多的面板，但我已经把它提炼成了最小的例子)。
顶部的面板也是一个灵活的容器，因为我希望它的孩子从上到下流动，当有空间的时候垂直中心。当顶部面板中有比它更适合的东西时，我希望它是可滚动的，因此是overflow: auto。
问题是：top的内容缩小到它的大小，即使使用flex-shrink: 0，滚动条也不会弹出。
在下面的演示中观察content是如何缩小的，即使它有一个显式指定的高度：
html, body {
height: 100%;
width: 100%;
mar
浏览 2提问于2018-01-03得票数 2
回答已采纳
4回答
我有一个4,000+页面的网站，每页有10张或更多的jpeg图片，大小不一。我正在努力使该网站更移动友好。为了达到这个目的，我想让图像缩小到更小的屏幕上。我知道我可以做这样的事情来表示图像会缩小：
img.bodyImg
{
width: 100%;
max-width: 357px;
height: auto;
}
但是，如果不是所有图像的宽度都是357 (或者其他什么的)，而我不想让更小的图像超出它们的真实尺寸，那该怎么办？为了让事情更有趣，如果图像标签没有指定的高度和宽度属性，该怎么办？
我的目标是找到一个解决方案，不需要我手动调整数以万计的图像调用，但我可以进行搜索和替换。图像当
浏览 5提问于2015-04-23得票数 12
回答已采纳
我想要一个div包含文本和图像自动缩放，以适应剩余的空间，文本没有占据在div。我得出的结论是，最常见的缩放img元素的方法是通过最大高度/最大宽度样式。但是这个值是相对于父元素的，根据设计，我不会知道它的空间大小。
因此，在自动缩放的div上使用“背景图像”样式似乎是可行的。此外，Flex-box似乎是该走的路。
HTML：
<div class="item">
<div class="item-img" style="background-image:url('images/piano.jpg')"/
浏览 0提问于2017-10-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
