blocks|key|4714472|text|尝试以%25为单位为转盘中的图像指定宽度？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4714473|.item+img+{
++++width:100%25;
}|code-block|syntax|javascript|4714474|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try giving a Width in % to the image in  the carousel?</p>

<pre><code>.item img {
    width:100%;
}
</code></pre>


blocks|key|208425|text|我假设你有不同大小的图片。我自己测试过了，它就像你描述的那样工作(总是居中，图像宽度合适)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208426|/*CSS*/
div.c-wrapper{
++++width:+80%25;+/*+for+example+*/
++++margin:+auto;
}

.carousel-inner+>+.item+>+img,+
.carousel-inner+>+.item+>+a+>+img{
width:+100%25;+/*+use+this,+or+not+*/
margin:+auto;
}


<div+class="c-wrapper">
<div+id="carousel-example-generic"+class="carousel+slide">
++
++<ol+class="carousel-indicators">
++++<li+data-target="#carousel-example-generic"+data-slide-to="0"+class="active"></li>
++++<li+data-target="#carousel-example-generic"+data-slide-to="1"></li>
++++<li+data-target="#carousel-example-generic"+data-slide-to="2"></li>
++</ol>

++
++<div+class="carousel-inner">
++++<div+class="item+active">
++++++<img+src="http://placehold.it/600x400">
++++++<div+class="carousel-caption">
++++++++hello
++++++</div>
++++</div>
++++++++<div+class="item">
++++++<img+src="http://placehold.it/500x400">
++++++<div+class="carousel-caption">
++++++++hello
++++++</div>
++++</div>
++++<div+class="item">
++++++<img+src="http://placehold.it/700x400">
++++++<div+class="carousel-caption">
++++++++hello
++++++</div>
++++</div>
++</div>

++
++<a+class="left+carousel-control"+href="#carousel-example-generic"+data-slide="prev">
++++<span+class="icon-prev"></span>
++</a>
++<a+class="right+carousel-control"+href="#carousel-example-generic"+data-slide="next">
++++<span+class="icon-next"></span>
++</a>
</div>
</div>|code-block|syntax|javascript|208427|这就产生了一个“跳跃”，因为可变的高度...要解决这个问题，可以尝试下面这样的代码：Select+the+tallest+image+of+a+list|offset|length|208428|或者使用media-query设置您自己的固定高度。|208429|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/8231012/select-the-tallest-image-of-a-list^0|0|0|16|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I assume you have different sized images. I tested this myself, and it works as you describe (always centered, images widths appropriately)</p>

<pre><code>/*CSS*/
div.c-wrapper{
    width: 80%; /* for example */
    margin: auto;
}

.carousel-inner &gt; .item &gt; img, 
.carousel-inner &gt; .item &gt; a &gt; img{
width: 100%; /* use this, or not */
margin: auto;
}

&lt;!--html--&gt;
&lt;div class="c-wrapper"&gt;
&lt;div id="carousel-example-generic" class="carousel slide"&gt;
  &lt;!-- Indicators --&gt;
  &lt;ol class="carousel-indicators"&gt;
    &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
    &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
    &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
  &lt;/ol&gt;

  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="item active"&gt;
      &lt;img src="http://placehold.it/600x400"&gt;
      &lt;div class="carousel-caption"&gt;
        hello
      &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class="item"&gt;
      &lt;img src="http://placehold.it/500x400"&gt;
      &lt;div class="carousel-caption"&gt;
        hello
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="http://placehold.it/700x400"&gt;
      &lt;div class="carousel-caption"&gt;
        hello
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Controls --&gt;
  &lt;a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"&gt;
    &lt;span class="icon-prev"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="right carousel-control" href="#carousel-example-generic" data-slide="next"&gt;
    &lt;span class="icon-next"&gt;&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This creates a "jump" due to variable heights... to solve that, try something like this: <a href="https://stackoverflow.com/questions/8231012/select-the-tallest-image-of-a-list">Select the tallest image of a list</a></p>

<p>Or use media-query to set your own fixed height.</p>


blocks|key|208454|text|添加这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208455|.carousel+.item+img+{
+++left:+-9999px;++/*important+*/
+++right:+-9999px;++/*important+*/
+++margin:+0+auto;++/*important+*/
+++max-width:+none;++/*important+*/
+++min-width:+100%25;
+++position:+absolute;
}|code-block|syntax|javascript|208456|当然，父div中的一个需要有一个位置:relative，但我相信默认情况下是这样的。|208457|点击这里查看：http://paginacrestinului.ro/|offset|length|208458|entityMap|0|LINK|mutability|MUTABLE|url|http://paginacrestinului.ro/^0|0|0|0|7|S|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>add this</p>

<pre><code>.carousel .item img {
   left: -9999px;  /*important */
   right: -9999px;  /*important */
   margin: 0 auto;  /*important */
   max-width: none;  /*important */
   min-width: 100%;
   position: absolute;
}
</code></pre>

<p>And of course one of the parent divs needs to have a position:relative, but I believe it does by default.</p>

<p>See it here: <a href="http://paginacrestinului.ro/" rel="nofollow">http://paginacrestinului.ro/</a></p>


blocks|key|208474|text|在carousel+html代码中为每个图像添加一个类，然后使用css应用margin:+0+auto。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|208475|entityMap^0|11|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Add a class to each image in the carousel html code, then with css apply <code>margin: 0 auto</code>.</p>


blocks|key|4714625|text|现在(在Boostrap+3%2B上)很简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4714626|.carousel-inner+img+{
++margin:+auto;
}|code-block|syntax|javascript|4714627|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Now (on Boostrap 3+) it's simply:</p>
<pre><code>.carousel-inner img {
  margin: auto;
}
</code></pre>


blocks|key|208555|text|在使用CMS时遇到了一个非常类似的问题，但上面的解决方案没有解决这个问题。我解决这个问题的方法是将以下内容放入适用的css中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208556|background-size:+cover|code-block|syntax|javascript|208557|在使用bootstrap的情况下，出于放置目的，我使用了：|208558|background-position:+center+center+/*+or+whatever+position+you+wanted+*/|208559|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Was having a very similar issue to this while using a CMS but it was not resolving with the above solution. What I did to solve it is put the following in the applicable css:</p>

<pre><code>background-size: cover
</code></pre>

<p>and for placement purposes in case you are using bootstrap, I used:</p>

<pre><code>background-position: center center /* or whatever position you wanted */
</code></pre>


blocks|key|208599|text|我将<div+class="carousel"+id...>放在另一个带有类容器(<div+class="container"><div+class="carousel"+id="my-carousel">...</div></div>)的div中。这也解决了这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|208600|entityMap^0|2|S|15|25|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>I've placed the <code>&lt;div class="carousel" id...&gt;</code> inside another div with the class container (<code>&lt;div class="container"&gt;&lt;div class="carousel" id="my-carousel"&gt;...&lt;/div&gt;&lt;/div&gt;</code>). That solved it too.</p>


blocks|key|4714776|text|.carousel-inner+>+.item+>+img+{
++++margin:+0+auto;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4714777|这个简单的解决方案对我很有效。|unstyled|4714778|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>.carousel-inner &gt; .item &gt; img {
    margin: 0 auto;
}
</code></pre>

<p>This simple solution worked for me</p>


blocks|key|208684|text|通过在bootstrap+3上使用此命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208685|#carousel-example-generic{
++++margin:auto;
}|code-block|syntax|javascript|208686|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>By using this on bootstrap 3:</p>

<pre><code>#carousel-example-generic{
    margin:auto;
}
</code></pre>


blocks|key|208733|text|在bootstrap+v4中，我使用以下命令居中并填充屏幕上的carousel+img|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208734|<img+class="d-block+mx-auto"+max-width="100%25"+max-height="100%25">|code-block|syntax|javascript|208735|我确信这需要设置父元素的高度或宽度|208736|html,body{height:100%25;}
.carousel,.carousel-item,.active{height:100%25;}
.carousel-inner{height:100%25;}|208737|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>in bootstrap v4, i center and fill the carousel img to the screen using</p>

<pre><code>&lt;img class="d-block mx-auto" max-width="100%" max-height="100%"&gt;
</code></pre>

<p>pretty sure this requires parent elements' height or width to be set</p>

<pre><code>html,body{height:100%;}
.carousel,.carousel-item,.active{height:100%;}
.carousel-inner{height:100%;}
</code></pre>


blocks|key|208771|text|在Boostrap4上，只需将mx-auto添加到您的旋转木马图像类中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|208772|<div+class="carousel-item">
++<img+class="d-block+mx-auto"+src="http://placehold.it/600x400"+/>
</div>+|code-block|syntax|javascript|208773|根据需要与bootstrap+carousel+documentation中的样本相结合。|208774|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.0/components/carousel/^0|F|7|0|0|5|W|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>On Boostrap 4 simply add <code>mx-auto</code> to your carousel image class. </p>

<pre><code>&lt;div class="carousel-item"&gt;
  &lt;img class="d-block mx-auto" src="http://placehold.it/600x400" /&gt;
&lt;/div&gt; 
</code></pre>

<p>Combine with the samples from the <a href="https://getbootstrap.com/docs/4.0/components/carousel/" rel="noreferrer">bootstrap carousel documentation</a> as desired.</p>


blocks|key|4714927|text|上面的解决方案对我来说都不起作用。有可能有一些其他的风格冲突。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4714928|对我来说，下面的方法起作用了，希望它能帮助其他人。我使用的是bootstrap+4。|4714929|.carousel-inner+img+{+++++++
+++display:block;
+++height:+auto;+
+++max-width:+100%25;
}|code-block|syntax|javascript|4714930|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>None of the above solutions worked for me. It's possible that there were some other styles conflicting.</p>

<p>For myself, the following worked, hopefully it may help someone else. I'm using bootstrap 4.</p>

<pre><code>.carousel-inner img {       
   display:block;
   height: auto; 
   max-width: 100%;
}
</code></pre>


blocks|key|4714938|text|这个工作对我来说非常简单，只需添加属性中心“align=”即可。已在Bootstrap+4上测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4714939|
++++++++++++<div+class="carousel-inner"+align="center">+++++++++++++
++++++++++++++++<div+class="carousel-item+active">
++++++++++++++++++++<img+src="image1.jpg"+alt="no+image"+height="550">
++++++++++++++++</div>
++++++++++++++++<div+class="carousel-item">
++++++++++++++++++++<img+src="image2.jpg"+alt="no+image"+height="550">
++++++++++++++++</div>++++++++++++++++
++++++++++++++++<div+class="carousel-item">
++++++++++++++++++++<img+src="image3.png"+alt="no+image"+height="550">
++++++++++++++++</div>
+++++++++++++</div>|code-block|syntax|javascript|4714940|编辑：-|4714941|align属性已弃用，请使用CSS属性。|4714942|https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/align|offset|length|4714943|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1Z|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

<p>This work for me very simple just add attribute align=&quot;center&quot;.
Tested on Bootstrap 4.</p>
<pre><code>&lt;!-- The slideshow --&gt;
            &lt;div class=&quot;carousel-inner&quot; align=&quot;center&quot;&gt;             
                &lt;div class=&quot;carousel-item active&quot;&gt;
                    &lt;img src=&quot;image1.jpg&quot; alt=&quot;no image&quot; height=&quot;550&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;carousel-item&quot;&gt;
                    &lt;img src=&quot;image2.jpg&quot; alt=&quot;no image&quot; height=&quot;550&quot;&gt;
                &lt;/div&gt;                
                &lt;div class=&quot;carousel-item&quot;&gt;
                    &lt;img src=&quot;image3.png&quot; alt=&quot;no image&quot; height=&quot;550&quot;&gt;
                &lt;/div&gt;
             &lt;/div&gt;
</code></pre>
<p>Edit:-</p>
<p>align attribute is deprecated, use CSS property.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/align" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/align</a></p>


<p>I want my carousel images to be at the center (horizontally), which is not by default. I follow the solution at <a href="https://stackoverflow.com/questions/10591422/bootstrap-carousel-image-doesnt-align-properly">this topic</a>.</p>

<p>However, using this solution, when the carousel is resized and smaller than the image, the image is cropped instead of scaling as default.</p>

<p>How can I both center my image, but keep it to stretch to the carousel item?</p>


Make Bootstrap's Carousel both center AND responsive?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我希望我的旋转木马图像在中心(水平)，这不是默认的。我遵循的解决方案。但是，使用此解决方案时，当轮播调整大小并小于图像时，图像将被裁剪，而不是按默认比例缩放。我如何既使图像居中，又使其伸展到旋转木马项目？

问让Bootstrap的旋转木马既有中心又有响应性？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让Bootstrap的旋转木马既有中心又有响应性？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让Bootstrap的旋转木马既有中心又有响应性？
EN