Two Images, Side by Side Responsive

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 to max-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 to 25%, not your img tag.
You mentioned text overlay in your comment. Set .container (parent element) to position: relative; Set any tag (child element) within that .container to position: absolute;. Now you can set top or left any value within 100% and contain it within that .container. And since the img tag is max-width:100%;, it will take on full width of that container, which is 25%.
Also set height to auto 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>