Image Stretching Issue for Mobile and Tablet - html

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>#HTMLEditFormat(local.item.getTitle())#</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;"> </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;"> </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-"> </div>
<!---<p style="font-size: 12px; color: #ffffff;"> </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;"> </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;"> </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;"> </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

Answer 1

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

Answer 2

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

Answer 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

Answer 4

Try to add this code:
#media (max-width: 767px)
#homepage .carousel .item img {
object-fit: cover;
}

Answer 5

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