javascript - 如果它与 javascript 垂直，则尝试将动态图像居中

Question

我一直在寻找这方面的一些解决方案，但我似乎无法弄清楚。当它是垂直图像时，我试图将图像水平居中放置在页面上，所以基本上获取图像的尺寸，然后插入 CSS 使其居中(如果它是垂直的)。这是我的带有屏幕截图的标记。一个是正​​确的，另一个是不正确的。谢谢你!!

      <div class="product-image large">
        <img data-bind="attr:{alt:currentSampleImage, src:servicePath+'products/'+product().id+'/images/sample/_'+currentSampleImage()+'/large?auth='+ax.JRR}" id="productImage" src="https://dev.axsmb.com/api/products/26/images/sample/_0/large?auth=sov9fbd75cgubtfhoq4o47kj3tr2dn4fbl90pi54on05vqpc83p1" alt="0" >
      </div>

      <div data-bind="owlCarousel: { data: sampleImageKeys, owlOptions: carouselSettings }" class="owl-carousel carousel beta owl-theme" style="opacity: 1; display: block;">
          <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 194px; left: 0px; display: block; transition: all 0ms ease 0s; transform: translate3d(0px, 0px, 0px);"><div class="owl-item" style="width: 97px;"><div class="thumbnail product-image small">
            <img src="https://dev.axsmb.com/api/products/26/images/sample/_0/small?auth=sov9fbd75cgubtfhoq4o47kj3tr2dn4fbl90pi54on05vqpc83p1" data-bind="click:$root.selectImage.bind($data), attr:{rel:$index, alt:$index, src:$root.servicePath+'products/'+$root.product().id+'/images/sample/_'+$index()+'/small?auth='+ax.JRR}" rel="0" alt="0" >
          </div></div></div></div>
      <div class="owl-controls clickable" style="display: none;"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div></div><div class="owl-buttons"><div class="owl-prev"><button class="nav nav-prev"><i class="fa fa-caret-left"></i><span>Previous</span></button></div><div class="owl-next"><button class="nav nav-next"><span>Next</span><i class="fa fa-caret-right"></i></button></div></div></div></div>

    </div>

Answer 1

好吧，这是我放在一起的 jsfiddle https://jsfiddle.net/nponz4dc/13您可能需要稍微调整一下才能使其与您的元素一起使用，但我认为这是一个好的开始。 fiddle

HTML

您有两种产品，一种是垂直图像，一种是水平图像

<div class="product">
  <img src="https://usercontent1.hubstatic.com/8573904.jpg">
</div>
<div class="product">
  <img src="http://www.mathopenref.com/images/lines/horizontal.png">
</div>

CSS

这是一些基本的 CSS，只是使用了文本对齐。您可能需要更多样式，例如边距或显示。

.product {
  background: red;
}

.horizontal {
  text-align: center;
}

JS

基本上，我将图像高度与其宽度进行比较，然后如果其高度大于宽度，我将向其父类添加一个名为“水平”的类，该类具有适当的样式。

var images = document.getElementsByTagName("img");
//you might want to target only the images you need
//and not the all of the images in the DOM
for (var i = images.length - 1; i >= 0; i--) {
  var parent = images[i].parentNode;
  if (images[i].height > images[i].width) {
    parent.classList.add("horizontal");
  }
};