Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

wordpress - Resize images on a carousel

I am working on a wordpress site using the Morrison hotel theme. This theme has a fairly large slider in the middle. I find it far too tall in height. However, when I decrease the height of the owl-carousel div for example, the size reduction is done well but the images are not resized. I end up with the top of the image. I guess the problem is that I want to keep my ful-width display but reduce the height... Could you give me a hint to reduce the size in height of the slider and keep the right proportion of the photos? I tried to give you a snippet here but otherwise the site address is https://hotel-restaurant-la-borie.fr/

.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}

.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}

.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  /*-webkit-backface-visibility: hidden;*/
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
  display: none;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel.owl-loaded {
  display: block;
}

.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}

.owl-carousel.owl-hidden {
  opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
  display: none;
}

.owl-carousel.owl-drag .owl-item {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel.owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.owl-carousel.owl-rtl {
  direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
  float: right;
}

.owl-carousel .owl-controls {
  position: absolute;
  bottom: 2em;
  left: 0;
  right: 0;
  z-index: 5;
}

.owl-carousel .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.owl-carousel .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.owl-carousel .owl-dots .owl-dot span {
  width: 11px;
  height: 11px;
  margin: 5px 7px;
  background: #fff;
  display: block;
  -webkit-backface-visibility: visible;
  transition-duration: 0.2s;
  transition-property: opacity, background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 100%;
}

.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
  background: #c19c78;
}

/* No Js */

.no-js .owl-carousel {
  display: block;
}
<div id="page-carousel" wfd-id="76">
    <div class="owl-carousel morrison-hotel-carousel owl-theme owl-center owl-loaded" data-cols="2" data-center="true" wfd-id="77"> 
        <div class="owl-stage-outer" wfd-id="103">
            <div class="owl-stage" style="transition: all 0.25s ease 0s; width: 9100px; transform: translate3d(-7150px, 0px, 0px);" wfd-id="104"><div class="owl-item cloned" style="width: 650px; margin-right: 0px;" wfd-id="131"><div wfd-id="132">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div>
                </div>
                <div class="owl-item cloned" style="width: 650px; margin-right: 0px;" wfd-id="129"><div wfd-id="130">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div>
                </div><div class="owl-item" style="width: 650px; margin-right: 0px;" wfd-id="127"><div wfd-id="128">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 650px; margin-right: 0px;" wfd-id="125"><div wfd-id="126">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 650px; margin-right: 0px;" wfd-id="123"><div wfd-id="124">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180325_111721-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180325_111721-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180325_111721-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180325_111721-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180325_111721-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 650px; margin-right: 0px;" wfd-id="121"><div wfd-id="122">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180623_092543-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180623_092543-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180623_092543-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180623_092543-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180623_092543-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 650px; margin-right: 0px;" wfd-id="119"><div wfd-id="120">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_142800-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_142800-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_142800-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_142800-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_142800-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 650px; margin-right: 0px;" wfd-id="117"><div wfd-id="118">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 650px; margin-right: 0px;" wfd-id="115"><div wfd-id="116">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103255-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103255-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103255-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103255-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103255-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 650px; margin-right: 0px;" wfd-id="113"><div wfd-id="114">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_151156-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_151156-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_151156-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_151156-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_151156-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 650px; margin-right: 0px;" wfd-id="111"><div wfd-id="112">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-815x500.jpg" width="815" height="500" srcset="https://hote

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Add the below CSS, change to whatever proportions you require

#page-carousel{
height:300px !important;
overflow:hidden !important; 
}

img{
height:100% !important;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...