Question

将'x'圆对齐到图像的右上角有些麻烦，因为其祖父母已溢出：已对其应用了隐藏样式。圆被切掉，并且不在图像的角落。

我已经花了数小时寻找合适的解决方案，但还是放弃了。

我想实现这种结果。

这是我一直想做的事。

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function($uibModal){
  var vm = this;

  vm.existingImages = [
    { img: 1, src: 'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
    { img: 2, src: 'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
    { img: 3, src: 'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{ img: 4, src: 'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'},
    { img: 5, src: 'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-gallery-fullscreen'},
    { img: 6, src: 'https://oddstuffmagazine.com/wp-content/uploads/2018/05/forest-in-Norway-650x908.jpg'},
  ];
})

.existing-img-gallery {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.existing-img-thumbnail {
	float: left;
	position: relative;
	width: 18%;
	padding-bottom: 18%;
	margin: 0.83%;
	overflow: hidden;
}

.existing-img-container {
	position: absolute;
	width: 100%;
	height: 100%;
}

.existing-img-container img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

i.ion-ios-close-circle.delete-img {
    position: absolute;
    right: -5px;
    z-index: 1;
    font-size: 17px;
    left: 95%;
    top: 43%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
  </head>
  </head>

  <body>
    <div ng-controller="mainCtrl as vm">
      <div class="modal-body">
         <div ng-repeat="img in vm.existingImages" class="existing-img-gallery">
            <div class="existing-img-thumbnail">
               <div class="existing-img-container">
                  <i class="ion-ios-close-circle delete-img clickable"></i>
                  <img class="clickable" ng-src="{{this.img.src}}" alt="...">
                </div>
             </div>
          </div>
       </div>
    </div>
  </body>

</html>

Answer 1

这是我的尝试。只需移动具有overflow:hidden

的元素

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function($uibModal){
  var vm = this;

  vm.existingImages = [
    { img: 1, src: 'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
    { img: 2, src: 'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
    { img: 3, src: 'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{ img: 4, src: 'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'},
    { img: 5, src: 'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-gallery-fullscreen'},
    { img: 6, src: 'https://oddstuffmagazine.com/wp-content/uploads/2018/05/forest-in-Norway-650x908.jpg'},
  ];
})

.existing-img-gallery {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.existing-img-thumbnail {
	float: left;
	position: relative;
	width: 18%;
	padding-bottom: 18%;
	margin: 0.83%;
	/*overflow: hidden;*/
}

.existing-img-container {
	position: absolute;
	width: 100%;
	height: 100%;
overflow: hidden;
}

.existing-img-container img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

i.ion-ios-close-circle.delete-img {
    position: absolute;
    right: -5px;
    z-index: 1;
    font-size: 17px;
    left: 95%;
    top: 43%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
  </head>
  </head>

  <body>
    <div ng-controller="mainCtrl as vm">
      <div class="modal-body">
         <div ng-repeat="img in vm.existingImages" class="existing-img-gallery">
            <div class="existing-img-thumbnail">
               <i class="ion-ios-close-circle delete-img clickable"></i>
               <div class="existing-img-container">

                  <img class="clickable" ng-src="{{this.img.src}}" alt="...">
                </div>
             </div>
          </div>
       </div>
    </div>
  </body>

</html>

Answer 2

只需尝试将图标放置在溢出的隐藏容器之外即可。

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function($uibModal){
  var vm = this;

  vm.existingImages = [
    { img: 1, src: 'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
    { img: 2, src: 'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
    { img: 3, src: 'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{ img: 4, src: 'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'},
    { img: 5, src: 'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-gallery-fullscreen'},
    { img: 6, src: 'https://oddstuffmagazine.com/wp-content/uploads/2018/05/forest-in-Norway-650x908.jpg'},
  ];
})

.existing-img-gallery {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.existing-img-thumbnail {
	float: left;
	position: relative;
	width: 18%;
	padding-bottom: 18%;
	margin: 0.83%;
}

.existing-img-container {
	position: absolute;
	width: 100%;
	height: 100%;
  overflow: hidden;
  z-index: 1;
}

.existing-img-container img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

i.ion-ios-close-circle.delete-img {
    position: absolute;
    right: -5px;
    z-index: 2;
    font-size: 17px;
    left: 95%;
    top: 43%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
  </head>
  </head>

  <body>
    <div ng-controller="mainCtrl as vm">
      <div class="modal-body">
         <div ng-repeat="img in vm.existingImages" class="existing-img-gallery">
            <div class="existing-img-thumbnail">
               <i class="ion-ios-close-circle delete-img clickable"></i> 
               <div class="existing-img-container">
                
                    <img class="clickable" ng-src="{{this.img.src}}" alt="...">
                </div>
             </div>
          </div>
       </div>
    </div>
  </body>

</html>

Answer 3

我完全改变了答案。我查看了您的结构，重复的结构在我看来重复了错误的内容。

我不是角度专家，但是在<div ng-repeat="img in vm.existingImages" class="existing-img-gallery">部分，您基本上将图像容器重复了6次，并且样式并非完全针对这种结构设计的。

您可以执行以下操作：

<div class="existing-img-gallery">
    <div ng-repeat="img in vm.existingImages" class="existing-img-thumbnail">
        <div class="existing-img-container">
            <img class="clickable" ng-src="{{this.img.src}}" alt="...">
        </div>
        <i class="ion-ios-close-circle delete-img clickable"></i>
    </div>
</div>

这样，您只有一个.existing-img-gallery，并且内部有6个.existing-img-thumbnail元素。然后，您只需删除overflow: hidden的{{1}}规则。

我认为这将是对结构的改进，并且您将对样式有更多的控制。

Answer 4

因此，如果您不能如其他答案所言而远离overflow: hidden，这意味着您无法在室外腾出空间，除了在内部别无选择平铺。

此代码段的主要区别：

图标实际上是唯一需要某种绝对定位的项目，因为它是唯一需要从其自然位置移开的东西。
每个图块内部的空间都是通过existing-img-container中的填充来创建的，以便可以在角上呈现图标而无需裁剪。
existing-img-container不需要绝对位置，这只会使将来的事情变得更加复杂。
您无需通过转换来转换图标，因为它已经绝对定位。
对实际的img标签不需要做任何花哨的事情，只需要强制宽度即可，这样它就不会试图溢出图块。
您可能需要对flexbox的对齐方式进行一些调整，以完全按照您的想法进行分配。

PS：提供了完整的摘录以确保完整性，但更改仅在CSS规则中进行。

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function($uibModal){
  var vm = this;

  vm.existingImages = [
    { img: 1, src: 'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
    { img: 2, src: 'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
    { img: 3, src: 'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{ img: 4, src: 'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'},
    { img: 5, src: 'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-gallery-fullscreen'},
    { img: 6, src: 'https://oddstuffmagazine.com/wp-content/uploads/2018/05/forest-in-Norway-650x908.jpg'},
  ];
})

.existing-img-gallery {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.existing-img-thumbnail {
    float: left;
    width: 18%;
    overflow: hidden;
}

.existing-img-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: flex-start;
}

.existing-img-container img {
    width: 100%;
}

i.ion-ios-close-circle.delete-img {
    position: absolute;
    right: 0px;
    z-index: 5;
    font-size: 17px;
    top: 0px;
    height: 100%;
    width: auto;
}

<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
  </head>
  </head>

  <body>
    <div ng-controller="mainCtrl as vm">
      <div class="modal-body">
         <div ng-repeat="img in vm.existingImages" class="existing-img-gallery">
            <div class="existing-img-thumbnail">
               <div class="existing-img-container">
                  <i class="ion-ios-close-circle delete-img clickable"></i>
                  <img class="clickable" ng-src="{{this.img.src}}" alt="...">
                </div>
             </div>
          </div>
       </div>
    </div>
  </body>

</html>

在另一个元素上对齐元素

4 个答案: