如果动态图像与javascript垂直，则尝试使其居中

Question

I was looking for some solutions on this but I can't seem to figure it out. I am trying to center an image horizontally on the page when it's a vertical image, so basically getting the dimensions of the image, and then inserting CSS to center it (if it's vertical). Here's my markup with a screen shot. One is correct, the other is not. Thank you!!

      <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

Well here's a jsfiddle i put together https://jsfiddle.net/nponz4dc/13 You may need to tweak it a little to get it to work with your project but i think its a good start. Fiddle

HTML

You've got two products, one with a vertical image and one with a horizontal

<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

Here's some basic css, just using text-align. You may need more styles like margins or displays.

.product {
  background: red;
}

.horizontal {
  text-align: center;
}

JS

Basically, i'm comparing the images height to it's width and then if its height is greater than it's width i'm adding a class to it's parent called "horizontal" that has the appropriate styles.

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");
  }
};