调整两个动态元素的大小以匹配高度

卢卡斯·桑托斯

我试图增加的规模ion-slideimg相互匹配。

我正在尝试使用 CSS 来做到这一点,但我无法同时增加两者的大小。

HTML:

<ion-view view-title="Prefeitura Municipal">
  <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
  </ion-nav-buttons>

  <ion-content>

            <ion-slide-box>

             <ion-slide>
                <div class = "box boxImagem">
                   <img ng-src="img/Boletos.jpg" class="minha-imagem">
                </div>
             </ion-slide>

             <ion-slide>
                <div class = "box boxImagem2">
                   <img  ng-src="img/Arraiá.jpg" class="minha-imagem">
                </div>
             </ion-slide>

             <ion-slide>
                <div class = "box boxImagem3">
                   <img ng-src="img/Alimentação.jpg" class="minha-imagem">
                </div>
             </ion-slide>

          </ion-slide-box>

          <div>
            <div class="row icon-row">
                <ion-item class="col text-center">
                  <img class="full-image" src="img/capitol-building.png"></img>
                  <br>Prefeitura
                </ion-item>
                <ion-item class="col text-center">
                  <img class="full-image" src="img/leader-with-loudspeaker.png" ui-sref="app.principal"></img>
                  <br>Ouvidoria<br>
                </ion-item>
                <ion-item class="col text-center">
                  <img class="full-image" src="img/earth-pictures.png"></img>
                  <br>Turismo<br>
                </ion-item>
            </div>
            <div class="row icon-row">
                <ion-item class="col text-center">
                  <img class="full-image" src="img/college-graduation.png"></img>
                  <br>Educação <br>
                </ion-item>
                <ion-item class="col text-center">
                  <img class="full-image" src="img/doctor-stethoscope.png"></img>
                  <br>Saúde
                </ion-item>
                <ion-item class="col text-center">
                  <img class="full-image" src="img/bus-service.png"></img>
                  <br>Serviços<br>Públicos
                </ion-item>
                <!-- <ion-item class="col text-center">
                  <a class="botao button button-positive" href="#/app/site">Icon</a>
                  <br>Site
                </ion-item> -->
            </div> 
        </div>

    </ion-content>
    <div class="bar bar-footer bar-balanced">
      <button class="button icon ion-android-home">Inicio</button>
      <h1 class="title">Prefeitura</h1>
      <button class="button icon ion-earth pull-right">Site</button>
    </div>
</ion-view>

CSS

boxImgem, .boxImagem2, .boxImagem3{
           width: 100%;
           height: 100%;

        }
        .minha-imagem{
            float: left;
            width: 100%;
            text-align: center;
            margin: 0px 0px 0;
        }
大卫·塞茨

据我所知,宽度是通过 JavaScript 设置的,因此会覆盖 css 规则。如果您使用诸如 codepen 之类的服务来创建代码的工作演示,则更容易获得帮助

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用Javascript匹配两个HTML元素的高度

来自分类Dev

使用Javascript匹配两个HTML元素的高度

来自分类Dev

两个垂直子元素需要适合父级的100%高度,两个高度均为动态高度

来自分类Dev

两个元素相互叠加,其父元素的高度调整为其中较大的一个

来自分类Dev

如何使用情节提要自动布局调整这两个元素并调整其大小?

来自分类Dev

jQuery:在窗口调整大小时使两个div高度相同

来自分类Dev

根据父级的高度调整两个div的高度

来自分类Dev

根据元素的大小动态调整GeometryReader的高度

来自分类Dev

如何使两个元素的高度相同?

来自分类Dev

CSS使两个元素的高度相同,而与屏幕大小无关

来自分类Dev

HTML内联显示两个元素,无需折叠即可水平调整大小

来自分类Dev

AngularJs相应地调整/调整两个div的大小

来自分类Dev

当窗口调整大小时另一个元素的高度发生变化时,如何动态更新元素的外层高度?

来自分类Dev

匹配列表的前两个元素

来自分类Dev

如何比较两个动态数组并检查哪些元素匹配?

来自分类Dev

如何使两个元素都填充父元素(高度)?

来自分类Dev

子元素的字体大小会根据父元素的高度动态调整

来自分类Dev

子元素的字体大小会根据父元素的高度动态调整

来自分类Dev

如何水平创建两个Div调整大小的Jquery

来自分类Dev

连续两个项目而无需调整大小-flexbox

来自分类Dev

CSS怀疑内联调整两个框的大小

来自分类Dev

在调整大小时将两个框居中

来自分类Dev

html在两个调整大小的图像之间拟合文本

来自分类Dev

jQuery UI可调整大小的两个对象

来自分类Dev

WPF:按比例调整两个按钮的大小

来自分类Dev

可可调整两个堆叠表的大小

来自分类Dev

每个 div 显示两个内嵌图像并调整大小

来自分类Dev

一次调整两个 Div 的大小

来自分类Dev

并排放置两个div,一个可调整大小,另一个具有相同的高度

Related 相关文章

  1. 1

    使用Javascript匹配两个HTML元素的高度

  2. 2

    使用Javascript匹配两个HTML元素的高度

  3. 3

    两个垂直子元素需要适合父级的100%高度,两个高度均为动态高度

  4. 4

    两个元素相互叠加,其父元素的高度调整为其中较大的一个

  5. 5

    如何使用情节提要自动布局调整这两个元素并调整其大小?

  6. 6

    jQuery:在窗口调整大小时使两个div高度相同

  7. 7

    根据父级的高度调整两个div的高度

  8. 8

    根据元素的大小动态调整GeometryReader的高度

  9. 9

    如何使两个元素的高度相同?

  10. 10

    CSS使两个元素的高度相同,而与屏幕大小无关

  11. 11

    HTML内联显示两个元素,无需折叠即可水平调整大小

  12. 12

    AngularJs相应地调整/调整两个div的大小

  13. 13

    当窗口调整大小时另一个元素的高度发生变化时,如何动态更新元素的外层高度?

  14. 14

    匹配列表的前两个元素

  15. 15

    如何比较两个动态数组并检查哪些元素匹配?

  16. 16

    如何使两个元素都填充父元素(高度)?

  17. 17

    子元素的字体大小会根据父元素的高度动态调整

  18. 18

    子元素的字体大小会根据父元素的高度动态调整

  19. 19

    如何水平创建两个Div调整大小的Jquery

  20. 20

    连续两个项目而无需调整大小-flexbox

  21. 21

    CSS怀疑内联调整两个框的大小

  22. 22

    在调整大小时将两个框居中

  23. 23

    html在两个调整大小的图像之间拟合文本

  24. 24

    jQuery UI可调整大小的两个对象

  25. 25

    WPF:按比例调整两个按钮的大小

  26. 26

    可可调整两个堆叠表的大小

  27. 27

    每个 div 显示两个内嵌图像并调整大小

  28. 28

    一次调整两个 Div 的大小

  29. 29

    并排放置两个div,一个可调整大小,另一个具有相同的高度

热门标签

归档