I am trying to provide an link to a responsive image. Everything is working properly, but I cannot figure out how to actually get the image to link to site. I have tried adding an line within each div class, but it resizes the images and does not work. I was hoping someone could point me in the right direction. My code is below. Thanks in advance!
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
text-align: center;
}
/*Pictures*/
#picImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#picImg:hover {opacity: 0.7;}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<body>
<style>
.row {display: flex; flex-wrap: wrap; padding: 0 4px;}
.column {flex: 25%; max-width: 25%; padding: 0 4px;}
.column img {margin-top: 4px; vertical-align: middle;}
#media screen and (max-width: 10000px){.column {flex: 25%; max-width: 50%;}
#media screen and (max-width: 1200px){.column {flex: 50%; max-width: 66%;}
#media screen and (max-width: 800px){.column {flex: 100%; max-width: 100%;}
</style>
</body>
<div class="row">
<div class="column">
<img id="picImg" src="LatestSnowfallReports.png" alt="Latest Snowfall/Wind
Reports" text-align="center" style="width:95%; height: 300px image-
rendering:crips-edges;">
</div>
<div class="column">
<img id="picImg" src="SnowfallReportMap.png" alt="Snowfall Report Map" text-
align="center" style="width:95%; height: 300px image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="SnowReport.png" alt="Submit A Report" text-
align="center" style="width:95%; height: 300px image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="WinterClimatology.png" alt="Northern Arizona Winter
Climatology" text-align="center" style="width:95%; height: 300px image-
rendering:crips-edges;">
</div>
</div>
</body>
</html>
Try to do this with the width:50vw; and height:50vh;
Then remove the transition:0.3s; I just changed it to 0.0s. You also forgot your semi colons after the style=height:300pxChange the heights and widths (style="width:95%; height:300px) to
(style="width:100%; height:100%)
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
text-align: center;
}
/*Pictures*/
#picImg {
border-radius: 5px;
cursor: pointer;
transition: 0.0s;
width: 50vw;
height:50vh;
}
#picImg:hover {opacity: 0.7;}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100px;
}
}
<!DOCTYPE html>
<html>
<body>
<style>
.row {display: flex; flex-wrap: wrap; padding: 0 4px;}
.column {flex: 25%; max-width: 25%; padding: 0 4px;}
.column img {margin-top: 4px; vertical-align: middle;}
#media screen and (max-width: 10000px){.column {flex: 25%; max-width: 50%;}
#media screen and (max-width: 1200px){.column {flex: 50%; max-width: 66%;}
#media screen and (max-width: 800px){.column {flex: 100%; max-width: 100%;}
</style>
</body>
<div class="row">
<div class="column">
<img id="picImg" src="LatestSnowfallReports.png" alt="Latest Snowfall/Wind
Reports" text-align="center" style="width:100%; height: 100%; image-
rendering:crips-edges;">
</div>
<div class="column">
<img id="picImg" src="SnowfallReportMap.png" alt="Snowfall Report Map" text-
align="center" style="width:100%; height: 100%; image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="SnowReport.png" alt="Submit A Report" text-
align="center" style="width:100%; height: 100%; image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="WinterClimatology.png" alt="Northern Arizona Winter
Climatology" text-align="center" style="width:100%; height: 100%; image-
rendering:crips-edges;">
</div>
</div>
</body>
</html>
Related
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<table align="center">
<tr>
<td align="center">
<div class="row">
<div class="column">
<img src="pics/photos/sample1.png">
<img src="pics/photos/sample2.png">
<img src="pics/photos/sample3.png">
</div>
<div class="column">
<img src="pics/photos/sample4.png">
<img src="pics/photos/sample5.png">
<img src="pics/photos/sample6.png">
</div>
<div class="column">
<img src="pics/photos/sample7.png">
<img src="pics/photos/sample8.png">
<img src="pics/photos/sample9.png">
</div>
</div>
</td>
</tr>
</table>
Someone maybe know why my div isn't go to the center and keep stay on the side?
No matter what I writing with margin or align it keep stay on the side (on the body CSS I've putted direction: rtl; if that matter.
HTML:
<table align="center">
<tr>
<td align="center">
<div class="row">
<div class="column">
<img src="pics/photos/sample1.png">
<img src="pics/photos/sample2.png">
<img src="pics/photos/sample3.png">
</div>
<div class="column">
<img src="pics/photos/sample4.png">
<img src="pics/photos/sample5.png">
<img src="pics/photos/sample6.png">
</div>
<div class="column">
<img src="pics/photos/sample7.png">
<img src="pics/photos/sample8.png">
<img src="pics/photos/sample9.png">
</div>
</div>
</td>
</tr>
</table>
CSS:
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
Thank you all for the help!
from what I can understand you want your "column" divs to be centered inside row div. I will suggest you to learn flex-box and grid which makes thing easier.
I have added only two lines of code in your ".row" class
1.display:flex
2.justify-content:center
Below is my solution.
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
display: flex;
justify-content: center;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<table align="center">
<tr>
<td align="center">
<div class="row">
<div class="column">
<img src="pics/photos/sample1.png">
<img src="pics/photos/sample2.png">
<img src="pics/photos/sample3.png">
</div>
<div class="column">
<img src="pics/photos/sample4.png">
<img src="pics/photos/sample5.png">
<img src="pics/photos/sample6.png">
</div>
<div class="column">
<img src="pics/photos/sample7.png">
<img src="pics/photos/sample8.png">
<img src="pics/photos/sample9.png">
</div>
</div>
</td>
</tr>
</table>
I have an html page which displays three images in a row and I need to place a button over each of them in a responsive way. I want the images to change in size and then be one above the other when the page width is reduced, but I want the button size to also reduce as image reduces in size and I want the button position to remain the same wrt the image.
I found that I needed to use relative positioning for the button but when I do that a large amount of extra space appears below an image. If I use absolute positioning this space doesn't appear but then the button no longer stays positioned on the image when the image size and/or position changes. Also I can't find a way to reduce the button size.
How can I prevent the extra white space appearing and ensure the button stays over the image and how can i make the button size change dynamically when page width is changed?
* {
box-sizing: border-box;
}
.main {
color: limegreen;
background-color: lightsteelblue;
}
.row {
width: 100%;
display: block;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
#media screen and (max-width: 800px) {
.column {
float: none;
width: 360px;
margin-left: auto;
margin-right: auto;
}
}
#media screen and (max-width: 360px) {
.column {
width: 95%;
}
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.container {
position: relative;
}
/* Style the button and place it at the bottom of the container/image */
.container .btn {
position: relative;
bottom: 50%;
left: 50%;
transform: translate(-50%, -120%);
-ms-transform: translate(-50%, -50%);
background-color: transparent;
color: white;
font-size: 20px;
font-weight: 700;
padding: 12px 24px;
border: solid white;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<link href="images.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main row container">
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width: 100%" />
<button class="btn">START TODAY</button>
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width: 100%" />
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width: 100%" />
</div>
</div>
</body>
</html>
i change some css structure in your code.maybe this can help
.main.row.container .column {
overflow: hidden;
display: flex;
align-items: center;
vertical-align: middle;
justify-content: center;
flex-wrap: wrap;
}
* {
box-sizing: border-box;
}
.main {
color: limegreen;
background-color: lightsteelblue;
}
.row {
width: 100%;
display: block;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
#media screen and (max-width: 800px) {
.column {
float: none;
width: 360px;
margin-left: auto;
margin-right: auto;
}
}
#media screen and (max-width: 360px) {
.column {
width: 95%;
}
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.container {
position: relative;
}
/* Style the button and place it at the bottom of the container/image */
.container .btn {
position: absolute;
color: white;
font-size: 20px;
font-weight: 700;
padding: 12px 24px;
border: solid white;
cursor: pointer;
border-radius: 5px;
background-color: transparent;
}
.container .btn:hover {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<link href="images.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main row container">
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width: 100%" />
<button class="btn">START TODAY</button>
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width: 100%" />
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width: 100%" />
</div>
</div>
</body>
</html>
I put some HTML/CSS together in order to customize a content block on Squarespace. 4 images floating inline. I want to hover on the image and for it to fade into another image, creating the illusion of zooming out. Everytime I try to implement the commands to do this, I break it. The new image isn't centered on the existing image and in some cases, finds a new position on the page. I want to keep the current structure intact.
Can someone please help me with adding the new code in order to achieve this?
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
div.desc {
padding: 15px;
text-align: center;
}
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png" style="width:100%">
<div class="desc">Sarah Nordean</div>
</div>
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png" style="width:100%">
<div class="desc">Scott Everingham</div>
</div>
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png" style="width:100%">
<div class="desc">Serena Beaulieu</div>
</div>
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png" style="width:100%">
<div class="desc">Shawn Evans</div>
</div>
</div>
UPDATE: this is now an answer to how to make one image fade into another on the given code.
I found that using the given card-changing code caused flickering on hover so I have changed it slightly so that existing main code remains as is except each img is wrapped in a div. This has as background-image the image that will be faded into. Some CSS is added to make the transition to/from opacity on hover
Here is the complete code, as given in the question with the additions listed above:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
div.desc {
padding: 15px;
text-align: center;
}
/* ADDED CSS */
div.background {
width:100%;
height:auto;
background-position: 0px 8px;
background-repeat:no-repeat no-repeat;
background-size:contain;
margin: 0;
padding: 0;
}
img { opacity : 1; transition:opacity 0.3s; }
img:hover { opacity : 0;}
</style>
<body>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png" style="width:100%;">
</div>
<div class="desc">Sarah Nordean</div>
</div>
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png" style="width:100%">
</div>
<div class="desc">Scott Everingham</div>
</div>
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png" style="width:100%">
</div>
<div class="desc">Serena Beaulieu</div>
</div>
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png" style="width:100%">
</div>
<div class="desc">Shawn Evans</div>
</div>
</div>
</body>
</html>
This is the original text in this answer post asking for clarification.
This wasn't claiming to be an answer but was asking for clarification of some code which cannot be done in a comment.
Here is the code Al Taljana put in a comment - with background-colors put in by me in lieu of actual images. Could you verify that this is the effect you want - basically just changing one image for another? (Run the snippet and hover over the rectangle).
.card { width: 130px; height: 195px; background: url("images/card-back.jpg") no-repeat; display: inline-block; background-color:magenta; }
.card:hover { background: url("images/card-front.jpg") no-repeat; background-color: cyan; }
<div class="card">
</div>
Now, I am not too sure about what are the exact images that you will like to use, but here is a template of how the code for it to work.
img {
transition: all linear 0.7s;
}
.box {
position: relative;
}
img.hover-img {
position: absolute;
opacity: 0;
}
.box:hover img.hover-img {
opacity: 1;
}
<div class="box">
<img class="hover-img" src="https://www.redbridgenet.com/wp-content/uploads/html5.png" alt="Image name"
width="300" height="300">
<img src="https://wwwtalks.com/wp-content/uploads/2017/11/logo-2582748_640-300x300.png" alt="Image name" width="300" height="300">
</div>
I'm trying to get a div element that is split in half and in one of the halfs, have 4 equal square boxes.
So far I think I have the initial set up but when I try to produce the 4 squares within one of the halfs one overflows past the other leaving both halfs not equal. I hope the code snippet might help
<!DOCTYPE html>
<html>
<head>
<title> Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
border: 0;
background: gray;
min-width: 100%;
}
.container {
min-width: 100%;
margin: 0 auto;
padding: 4px ;
}
[class*="col-"] {
float: left;
padding: 0;
margin: 0;
border: 0;
width:inherit
}
/* GRID SYSTEM */
.row::after {
content: '';
clear: both;
display: block;
}
#media only screen
and (min-width : 300px)
and (max-width : 640px) {
.col { float: left;}
.col { float: left;}
.mobile-not {
display:none;
}
}
#media only screen
and (min-width: 768px) {
.col { float: left;}
.col-6-md { width: 50%; }
}
#media only screen
and (min-width : 1224px) {
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-2-sm {width: inherit; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-6-md {
display:block;
width: inherit;
}
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
}
img {
width: 100%;
}
.text-demo {
background-color: #0099ff;
}
.text-prop {
padding-right: 20px;
color:white;
text-align: right;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-6">
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-2-sm mobile-not">
<div class="text-demo">
<div class="text-prop">
<br>
<font size="3.5"> <strong>Wcsho </strong> </font><br>
<font size="6"> <strong>Demo Site </strong><br></font><br>
<font size="3"> SALES: 888-888-1234<br>
SERVICE: 888-888-1234<br>
Custom: 888-888-1234<br>
</font>
<br>
<font size="2">
<a href="/hours-and-directions/">
918 greenville Rd,<br> uk
</a>
</font>
<br><br>
</div>
<br>
</div>
</div>
<br style="clear:both" />
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Any help would be appreciative, I can't figure out how to get everything to fit equally.
Here is an example using flexbox with pure CSS.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.row{
display: flex;
}
.col{
flex: 1;
margin: 0 1rem;
border: 1px solid black;
}
.square{
background-color: red;
flex: 1;
}
.square:after{
content: '';
display: block;
padding-bottom: 100%;
}
<div class="row">
<div class="col"></div>
<div class="col row">
<div class="col square"></div>
<div class="col square"></div>
<div class="col square"></div>
<div class="col square"></div>
</div>
</div>
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
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;
}
Set either height or width but not both. The image will scale itself and retain aspect ratio
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
Try to add this code:
#media (max-width: 767px)
#homepage .carousel .item img {
object-fit: cover;
}
All you have to do is set the width of image and let the image fix it self and maintain the ratio.