Two images side by side and responsive
Thanks for the help, but I'm doing it with a different solution now, whicha friend suggested:
#outer { position: relative; width: 50%; height: 0; margin: 30px auto 0 auto; padding-top: 25%; background-color: #999;} .itemwrapper { position: absolute; width: 50%; height: 100%; top: 0;} .item2 { left: 50%;}
#outer img { height: 100%; max-width: 100%;}
<div id="wrapper"> <div id="outer"> <div class="itemwrapper"> <img src="http://lorempixel.com/200/100" alt="bag" /> </div> <div class="itemwrapper item2"> <img src="http://lorempixel.com/400/200" alt="pen" /> </div> </div></div>
Two images, side by side responsive
Here is the solution that I reached. The main issue that I was having was that I had assigned
width:50%to img instead of the container.
Here are the final(ish) code blocks that are working as intended. Thanks for the suggestions!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Stylesheets/default.css">
</head>
<body>
<div class="page">
<div class="img-wrapper-l">
<a href="pol.html"><img src="Images/cal-engel-531490-unsplash.jpg"></a>
</div>
<div class="img-wrapper-r">
<a href="biz.html"><img src="Images/rawpixel-660717-unsplash.jpg"></a>
</div>
<div class="clear"></div>
</div>
</body>
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
}
.page {
width: 100%;
max-height: 100vh;
white-space: nowrap;
overflow: hidden;
}
.img-wrapper-l {
height: 100%;
width: 50%;
overflow: hidden;
position: absolute;
float: left;
}
.img-wrapper-r {
height: 100%;
width: 50%;
overflow: hidden;
position: relative;
float: right;
}
img {
height: auto;
width: auto;
max-width: 1200px;
max-height: 1200px;
}
How do I get pictures side by side (responsive)
https://jsfiddle.net/bs3fz70v/2/
if you want it to be responsive...
- Change
img
tags tomax-width
and set this in CSS. This will scale image down once it hits smaller screens. - Focus on your parent and child element structure. Your
.container
width
should be set to25%
, not yourimg
tag. - You mentioned text overlay in your comment. Set
.container
(parent element) toposition: relative;
Set any tag (child element) within that.container
toposition: absolute;
. Now you can settop
orleft
any value within 100% and contain it within that.container
. And since theimg
tag ismax-width:100%;
, it will take on full width of that container, which is 25%. - Also set
height
toauto
so images aren't stretched.
CSS
.seizoenen{
width:100%;
}
p {
position: absolute;
top: 50%;
left: 50%;
}
.container{
display: inline-block;
width: 24%;
position: relative;
}
img{
max-width: 100%;
}
Hope this gets you started experimenting with more positioning
Two Responsive Crossfading Images side by side
You have different options for making images responsive.
A simple solution is to make the images 100% width. The images will then grow and shrink.
Another solution is to use a flex box for the images and configure the shrink and grow behavior with flex box.
You could also use Media Queries and only set the width to 100% before or after a specific device width.
how to arrange 2 images side by side in mobile view?
Use percentages for your sizes, Example width: 50%; max-width: 50%
instead of pixeles
How to make images appear side by side on one row on desktop, but responsive and centered above each other on mobile?
https://jsfiddle.net/juk6ynd4/
Your code is correct, it does work perfectly fine. However looking at the site you're using
width: 100%;
however the images are in a grid, so you'll need to look through and what is limiting the sizes. For example you've something like this:
#div1 {
width: 50%;
}
#div2 {
width: 100%;
}
Then
<div id="div1">
<div id="div2">
This DIV will not get any bigger than 50% due to the scaling of div1!
</div>
</div>
How to align responsive image side by side with table
If you must set image as background and set it on the right, here you go:
In your div-contains
set this property:
background-size: 25%; /* From a 100% set 25% as your table width take 75% */
background-position: right; /* set it to the right */
DEMO
.div-contains{
background-image: url("http://www.castan.pt/castan/wp-content/uploads/2014/07/img-teste-02.jpg");
position: relative;
background-repeat: no-repeat;
background-size: 25%; /* From a 100% set 25% as your table width take 75% */
background-position: right; /* set it to the right */
}
.div-forum{
overflow-x:auto;
background-color:white;
width:75%;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr{
border-bottom: 1px solid #ddd;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="div-contains" >
<div class="div-forum" >
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td>yrdyr</td>
<td>yrdyr</td>
</tr>
<tr>
<td> </td>
<td>yrdyr</td>
<td>yrdyr</td>
</tr>
<tr>
<td> </td>
<td>yrdyr</td>
<td>yrdyr</td>
</tr>
<tr>
<td> </td>
<td>yrdyr</td>
<td>yrdyr</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Related Topics
How to Remove Specific Text With CSS
How to Limit the Maximum Files Chosen When Using Multiple File Input
Html,Css - How to Horizontally Center Two Tables Side by Side
Splitting the HTML Page Using Div
How to Append Querystrings to a Url on Submit of a Form
How to Always Show the Vertical Scrollbar in a Browser
How to Change Input Type="Date" Format
Does Ul Have Default Margin or Padding
Css: Width in Percentage and Borders
Css3 100Vh Not Constant in Mobile Browser
How to Remove Free Spaces Between Divs
Div Elements Overlapping Each Other
How to Declare a Variable in a Template in Angular
Best Way to Create Video from Html5 Animation
How to Get the Client Ip Address from Browser in Angular (Typescript)