Image Stretching Issue for Mobile and Tablet

Question

Problem: On the mobile version, the image is stretching on Portrait mode. As you can see below, it looks compressed.

On landscape mode, the image does not look stretched and looks exactly as the desktop version of the site.

I am using bootstrap and the images have class img-responsive and it does not work.

Below is the css that I wrote. I have tried setting background-size:contain, and some other approaches but did not render desired results. This project uses Coldfusion and Mura (CMS).

UPDATE

The following css is being used in an attempt to make it responsive:

@media (min-width: 1024px) #homepage .carousel .item img {
  width:100%;
  height:auto;
}
media (min-width:769px) and (max-width:980px) {
  #homepage .carousel .item img {
    max-width: 100%;
    min-height: 100%;
    height: auto;
    margin-top: 154px !important;
  }
}
@media (max-width: 751px) and (orientation: landscape) {
  .override-hidden-xs1 {
    display: block;
  }
  .carousel-inner {
    width: 100% !important;
  }
  .fixNext {
    margin-right: 0px;
  }
  .carouselCaption {
    margin-top: 120px !important;
  }
  .h4Font {
    font-size: 16px !important;
  }
  .upcoming-events-image {
    max-width: 180px;
    max-height: 180px;
    width: 22% !important;
    margin-left: 340px !important;
  }
  .image-margin-top {
    margin-top: 170px !important;
    display: inline-block;
  }
}
@media (max-width: 767px) {
  #homepage .carousel .item {
    height: 200px;
    margin-top: 241px;
  }
  #homepage .carousel .item img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  #homepage .carousel .item {
    height: 200px;
    margin-top: 311px;
  }
}
@media (min-width: 768px) and (max-width: 980px) {
  .company-logo {
    width: 400px;
  }
  #homepage .carousel .item img {
    /*max-width: 1200px;*/
    max-width: 100%;
    min-height: 100%;
    padding-top: 162px;
  }
  #homepage .carousel .carousel-caption {
    margin-left: 64px;
  }
  .image-margin-top {
    margin-top: 57px !important;
  }
  .changePosition {
    margin-top: -193px !important;
  }
}
@media (min-width: 920px) {
  .company-logo {
    width: 400px;
  }
  #homepage .carousel .item img {
    /*max-width: 1200px;*/
    max-width: 100%;
    min-height: 100%;
  }
}

Below is the coldfusion code where it calls the images form the CMS:

<div class="row carousel-inner padding-topImage">
  <cfset local.iterator.reset()>
    <cfset local.idx=0>
      <cfloop condition="local.iterator.hasNext()">
        <cfset local.item=iterator.next()>
          <cfif ListFindNoCase( 'jpg,jpeg,gif,png', ListLast(local.item.getImageURL(), '.'))>
            <div class="row item img-responsive<cfif local.idx eq 0> active</cfif>">
              <img src="#local.item.getImageURL(argumentCollection=local.imageArgs)#" alt="#HTMLEditFormat(local.item.getTitle())#">
              <cfif arguments.showCaption>
                <div class="container">
                  <div class="carousel-caption carousel-caption1">
                    <div>
                      <!--- <h3><a href="#local.item.getURL()#">#HTMLEditFormat(local.item.getTitle())#</a></h3> --->
                      <div class="visible-xs">
                        <!---<h2>#HTMLEditFormat(local.item.getTitle())#</h2>--->
                      </div>
                      <div class="hidden-xs">#local.item.getSummary()#
                        <!--- #local.item.getBody()# --->
                        <!---<p><a class="btn btn-larg btn-primary" href="#local.item.getURL()#">Read More</a></p>--->
                      </div>
                      <!---<div class="override-hidden-xs1 carouselCaption" style="color:##000"><span class="h4Font">#HTMLEditFormat(local.item.getTitle())#</span>
                                                </div>--->

                    </div>
                  </div>
                </div>
              </cfif>
            </div>
            <cfset local.idx++>
          </cfif>
      </cfloop>
</div>

UPDATE

Here is the issue I am having but I am not able to get around it.

The height is fixed and so I tried to height: auto but the images in the carousel disappears.

How would I modify the css so that the background height is dependent on the image being resize based on the screen size.

Here is the modified css:

@media (max-width: 747px){
	#homepage .carousel .item img{
		margin-top: 71px !important;
		max-width:0px;
		min-height:0%;
	}/*
	#homepage .carousel .item {
		height:180px !important;
	}*/
	.carousel-inner {
		height:auto;
	}
}
@media (min-width: 748px){
	#homepage .carousel .item img{
		max-width:0px;
		min-height:0%;
	}/*
	#homepage .carousel .item {
		height:180px !important;
	}*/
}

@media (max-width: 1024px) and (min-width: 768px){
	#homepage .carousel .item {
		width: 100% !important;
		/*margin-top: 20px !important;*/
		height:396px !important;
	}
}

/*@media (min-width:992px) and (max-width:1363px){
	#homepage .carousel .item img {
		/* width: 100% !important; 
		margin-top: 15px !important;
		max-height: auto;
		max-height: 100%;
		min-height: 80%;
	}
}

@media (min-width:1024px) and (max-width:1255px){

}*/

@media (min-width: 1024px){
	#homepage .carousel .item img {
		/* width: 100% !important; */
		margin-top: 15px !important;
		max-height: auto;
		max-height: 100%;
		min-height: 80%;
	}
}
@media (max-width:1263px) and (min-width:1024px){
	#homepage .carousel .item{ height:500px !important; }
		
	#homepage .carousel .carousel-caption { 
		left: 100px; 
		top: 80px;
		width: 500px;
	}
}

@media (min-width:1264px) and (max-width:1363px){
	#homepage .carousel .item{ height:502px !important; }
		#homepage .carousel .carousel-caption { 
		left: 99px;
		top: 100px;
	}
}

@media (min-width:1364px) and (max-width:1641px){
	#homepage .carousel .item{ height:540px !important; }
	
	#homepage .carousel .carousel-caption { 
		left: 170px; 
		top: 120px;
		width: 500px;
	}
		#homepage .carousel .carousel-caption { 
		left: 170px; 
		top: 80px;
		width: 500px;
	}
}

@media (min-width:1642px){
	#homepage .carousel .item{ height:650px !important; }
	
	#homepage .carousel .carousel-caption { 
		left: 170px; 
		top: 120px;
		width: 500px;
	}
}

<div class="row carousel-inner padding-topImage">
						
<div class="row item myclass">

<img src="/Regal-en-us/cache/file/90A5069B-155D-0201-11BF135B13F69E9A_W1280_H500.jpg" alt="Real People, Real Solutions See how we've helped make a difference in the lives of our members.">
									
	<div class="container">
		<div class="carousel-caption carousel-caption1">
			<div>
			<div class="visible-xs"></div>
				<div class="hidden-xs"><h1 class="titleSlide"><br>
	Real People,<br>
	Real Solutions</h1>

<p class="content1">See how we’ve helped make a difference in the lives of our members.</p>

<p style="font-size: 12px; color: #ffffff;">&nbsp;</p>

<p><a class="btn btn-info1 styleText btn-primary" href="/index.cfm/doctor-finder/" role="button">Read More</a></p>
<!---<p style="font-size: 12px; color: #ffffff;">&nbsp;</p>

<p><a class="btn btn-info" href="/index.cfm/doctor-finder/" role="button">Read More</a></p>--->
													
													
	</div>
                                                
                                                
	</div>
		</div>
	</div>
									
	</div>
								
<div class="row item myclass">

	<img src="/Regal-en-us/cache/file/9CFFC7AA-155D-0201-119470C3C01460AE_W1280_H500.jpg" alt="Need an Urgent Care Center? There is one right in your neighborhood – and we will help you find it.">
									
<div class="container">
	<div class="carousel-caption carousel-caption1">
			<div>
		<div class="visible-xs"></div>
				<div class="hidden-xs"><h1 class="titleSlide"><br>
	<h1>Need an Urgent Care Center?</h1>

<p class="content1">There is one right in your neighborhood –<br>
	and we will help you find it.</p>

<div class="embeddedContent oembed-provider-">&nbsp;</div>
<!---<p style="font-size: 12px; color: #ffffff;">&nbsp;</p>

<p><a class="btn btn-info1 styleText" href="http://oc2-web03/index.cfm/doctor-finder/" role="button">Find an Urgent Care</a></p>---><!---<p style="font-size: 12px; color: #686868;">&nbsp;</p>--->

<p><a class="btn btn-info1 slideText btn-primary urgentButton" href="/index.cfm/urgent-care-finder/" role="button">Find an Urgent Care</a></p>
													
</div>
</div>
	</div>
	</div>
									
		</div>
								
	<div class="row item myclass active">

	<img src="/Regal-en-us/cache/file/9CFD4EC1-155D-0201-11C0E45BAE92654E_W1280_H500.jpg" alt="Looking for a Doctor? We have just the right one for you.">
									
	<div class="container">
	<div class="carousel-caption carousel-caption1">
	<div>
	<div class="visible-xs"></div>
		<div class="hidden-xs"><h1 class="titleSlide"><br>
	Looking for a doctor?</h1>

<p class="content1">We have just the right one for you.</p>
<!---<p style="font-size: 12px; color: #ffffff;">&nbsp;</p>

<p><a class="btn btn-info1 styleText" href="/index.cfm/doctor-finder/" role="button">Read More\\\</a></p>--->

<p style="font-size: 12px; color: #686868;">&nbsp;</p>

<p><a class="btn btn-info1 slideText btn-primary" href="/index.cfm/doctor-finder/" role="button">Find a Doctor Now</a></p>
													
													
</div>
                                                
                                                
</div>
	</div>
		</div>
									
	</div>
								
	<div class="row item myclass">

	<img src="/Regal-en-us/cache/file/22E66EFF-155D-0201-11F1D4090927E676_W1280_H500.jpg" alt="Snow Machines Run as Winter Winds Down">
									
										<div class="container">
											<div class="carousel-caption carousel-caption1">
											    <div>
												
												<div class="visible-xs"></div>
													<div class="hidden-xs"><p>Curabitur ut suscipit tellus. Maecenas rhoncus, ante vitae vehicula vestibulum, metus sapien dapibus tellus, et mattis dolor neque vitae nisl.</p>
													
													
												</div>
                                                
                                                
												</div>
											</div>
										</div>
									
								</div>
								
					</div>

Because of the fixed height, the following is occuring in the mobile and tablet version. I have tried to remove the item classs that is causing the issue but as mentioned, it is makes the carousel to disappear

Any help would be appreciated

Is this site publicly available so I can examine the full css? — Miguel-F, Commented Nov 4, 2016 at 0:33

Shadi Alnamrouti · Accepted Answer · 2016-11-05 23:12:05Z

10

+25

As a rule of thumb, you should not specify the height for any of carousel components or set them to auto what causes the stretch is the [max/min]-height: 100% in these components:

.carousel-inner {
   height:auto;
  }

.carousel .item {
    height: auto;
}

.carousel .item img {
    height:auto;

}

This concept does not only apply to carousels. When designing classes, keep the height untouched or auto.

For example:

.give-me-the-bounty
{
    width: 100%;
    height:auto;
}

answered Nov 5, 2016 at 23:12

Shadi Alnamrouti

12.8k5 gold badges61 silver badges56 bronze badges

@ Shadi: Yes you correct. I have remove classes and causes the image not to appear
– Roberto Flores
Commented Nov 7, 2016 at 17:56
@RobertoFlores - Shadi is correct, it is the min-height: 100% in your theme's css file that is causing the issue. But you cannot remove the class altogether. Just remove that declaration for min-height: 100%. This is going to shorten your images (which is probably why you added that in the first place). When dealing with carousels like this it is best/easiest to resize the images to the greatest possible value before adding them to the site. Then let the browser resize for you by defining only one of the constraints (either width or height) but not both.
– Miguel-F
Commented Nov 7, 2016 at 18:18
@Miguel-F Yes that is correct however the image is still being cut off from both the top and bottom of the container.
– Roberto Flores
Commented Nov 7, 2016 at 18:36
@RobertoFlores, I saw your live website at regalmed.com The website uses absolute header div which causes the carousel to be chopped off from the top. Also, there is a margin-top: -240px set for the carousel (may be to compensate the effect of the absolute header). I suggest you either use relative or fixed havbar to set the carousel at the right relative position. Then release height of images in the carousel and remove any margins and height restrictions. You then will find your way. Hope this helps.
– Shadi Alnamrouti
Commented Nov 7, 2016 at 19:17
@ShadiNamrouti can you please provide where you are seeing that? I am not able to locate it
– Roberto Flores
Commented Nov 7, 2016 at 19:20

| Show 3 more comments

joshpj1 · Accepted Answer · 2016-11-02 18:42:09Z

4

Set either height or width but not both. The image will scale itself and retain aspect ratio

answered Nov 2, 2016 at 18:42

joshpj1

1861 gold badge1 silver badge10 bronze badges

Tried that.Does not work. If you can show me what I am doing wrong with that, please show me. I want to learn from my mistakes
– Roberto Flores
Commented Nov 3, 2016 at 19:09

Add a comment |

João Vilaça · Accepted Answer · 2016-10-31 18:06:38Z

3

Ok, forget the other approach, use inline styles:

<div style="background-image: url('#local.item.getImageURL(argumentCollection=local.imageArgs)#')"></div>

and then on your css use whatever styles you want

edited Oct 31, 2016 at 18:06

answered Oct 31, 2016 at 17:22

João Vilaça

6011 gold badge6 silver badges13 bronze badges

@ Joao: The reason I am doing that I am using coldfusion and to call the img from the cms, I use the img tag
– Roberto Flores
Commented Oct 31, 2016 at 17:31
Well, if there's no other way you can specify a height for the image's parent and set the img's height to 100%. If that doesn't work you should consider working on the image itself, and load 2 differente ones. Desktop and mobile.
– João Vilaça
Commented Oct 31, 2016 at 17:33
@ Joao: If I would do that, would I need to do that for skewing issue on tablets as well?
– Roberto Flores
Commented Oct 31, 2016 at 17:36
i guess so yeah. I wouldn't use bootstrap at all. But if you can't help it nor use the other solutions I think you should work on the image itself because you want specific results, so you must do specific stuff here im afraid.
– João Vilaça
Commented Oct 31, 2016 at 17:38
You can set a data attribute to your div, and set it equal to the url that you're receiving from the cms. Then, in your css, you would target the div with the "data" attribute. You can get his content with attr(). If all else fails you should try that. w3schools.com/cssref/func_attr.asp
– João Vilaça
Commented Oct 31, 2016 at 17:40

| Show 8 more comments

Ibrahim · Accepted Answer · 2016-11-06 04:35:03Z

2

Try to add this code:

@media (max-width: 767px)
#homepage .carousel .item img {

object-fit: cover;

}

answered Nov 6, 2016 at 4:35

Ibrahim

6,0763 gold badges40 silver badges50 bronze badges

@ Ibrahim: I have tried that before and it does not render the results I am looking for
– Roberto Flores
Commented Nov 7, 2016 at 17:45

Add a comment |

fsfh60 · Accepted Answer · 2016-11-07 05:04:55Z

2

All you have to do is set the width of image and let the image fix it self and maintain the ratio.

answered Nov 7, 2016 at 5:04

fsfh60

611 gold badge1 silver badge11 bronze badges

@ fsh60: yes you are right. But the set height for desktop is 650px. That is causing with how the image responds
– Roberto Flores
Commented Nov 7, 2016 at 17:42

Add a comment |

Collectives™ on Stack Overflow

Image Stretching Issue for Mobile and Tablet

5 Answers 5

Not the answer you're looking for? Browse other questions tagged
html
css
twitter-bootstrap
coldfusion
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Not the answer you're looking for? Browse other questions tagged htmlcsstwitter-bootstrapcoldfusion or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
html
css
twitter-bootstrap
coldfusion
or ask your own question.