Изменение размера изображения по ширине - CSS или Javascript

Question

Проблема: Я изо всех сил стараюсь структурировать строку при каждом изменении размера раздела.

Описание: Если изменить размер правой части меньше, перетащив линиюКартинки становятся меньше.

Как закодировать, что в строке имеется только одно изображение (полная ширина строки), если ширина раздела меньше 500 пикселей?

Перейдите по следующей ссылке на образец кода

Ссылка Codepen

Я действительно ценю, если кто-нибудь предложит или поможет мне решить эту проблему.

Ниже приведен мой код:

HTML:

<article id="links">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</article>

<div id="schiebeteil"></div>

<article id="rechts">

    <section class="main-nav">
        <div id="myBtnContainer">
            <button class="btn active" onclick="filterSelection('all')">All works</button>
            <button class="btn" onclick="filterSelection('illustrations')">Illustrations</button>
            <button class="btn" onclick="filterSelection('animations')">Animations</button>
        </div>
    </section>

    <section class="image-content">

        <div class="column illustrations">
            <div class="content">
                <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg">
                <h4>Mountains</h4>
            </div>
        </div>

        <div class="column illustrations">
            <div class="content">
                <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg">
                <h4>Mountains</h4>
            </div>
        </div>

        <div class="column illustrations">
            <div class="content">
                <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg">
                <h4>Mountains</h4>
            </div>
        </div>

        <div class="column animations">
            <div class="content">
                <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg">
                <h4>Mountains</h4>
            </div>
        </div>

    </section>

</article>

CSS:

* {
    font-family: Arial;
    font-size: 40px;
    box-sizing: border-box;
    font-weight: normal;
}

body {
    height: 100%;
    display: flex;
    background-color: #eee;
}

#links,
#rechts {
    width: 100%;
    height: 100vh;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 20%;
    overflow-y: auto;
}

#schiebeteil {
    width: 3px;
    flex: 0 0 auto;
    cursor: col-resize;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}


/* Create three equal columns that floats next to each other */

.column {
    float: left;
    width: 50%;
    display: none;
    /* Hide all elements by default */
}


/* Content */

.content {
    padding: 10px;
}


/* The "show" class is added to the filtered elements */

.show {
    display: block;
}

#myBtnContainer {
    margin: 0 auto;
    height: 100%;
    margin: 0px;
    padding: 0px;
}


/* Style the buttons */

.btn {
    border: none;
    outline: none;
    cursor: pointer;
    background: none;
    color: black;
    padding: 0;
    margin: 0;
    line-height: 96%;
    font-size: 18px;
    margin-right: 20px;
    float: right;
    height: 100%;
}

.btn:hover {}

.btn.active {}

img {
    width: 100%;
}

h4 {
    font-size: 18px;
    padding: 0;
    margin: 0;
}

.image-content {
    float: left;
    margin-left: 48px;
}

.main-nav {
    width: 100vh;
    height: 45px;
    position: fixed;
    -webkit-transform-origin: left top;
    -webkit-transform: rotate(-90deg) translateX(-100%);
}

JavaScript: (ссылка внутри тега)

filterSelection("all")

function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("column");
    if (c == "all") c = "";
    for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
    }
}

function w3AddClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {
            element.className += " " + arr2[i];
        }
    }
}

function w3RemoveClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
            arr1.splice(arr1.indexOf(arr2[i]), 1);
        }
    }
    element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
    });
}

Javascript - Resizable.js

/// <reference path="../bower_components/jquery/dist/jquery.js" />
/*
jquery-resizable
Version 0.32 - 5/5/2018
© 2015-2018 Rick Strahl, West Wind Technologies
www.west-wind.com
Licensed under MIT License
*/
(function(factory, undefined) {
    if (typeof define === "function" && define.amd) {
        // AMD
        define(["jquery"], factory);
    } else if (typeof module === "object" && typeof module.exports === "object") {
        // CommonJS
        module.exports = factory(require("jquery"));
    } else {
        // Global jQuery
        factory(jQuery);
    }
}(function($, undefined) {

    if ($.fn.resizable)
        return;

    $.fn.resizable = function fnResizable(options) {
        var defaultOptions = {
            // selector for handle that starts dragging
            handleSelector: null,
            // resize the width
            resizeWidth: true,
            // resize the height
            resizeHeight: true,
            // the side that the width resizing is relative to
            resizeWidthFrom: "right",
            // the side that the height resizing is relative to
            resizeHeightFrom: "bottom",
            // hook into start drag operation (event passed)
            onDragStart: null,
            // hook into stop drag operation (event passed)
            onDragEnd: null,
            // hook into each drag operation (event passed)
            onDrag: null,
            // disable touch-action on $handle
            // prevents browser level actions like forward back gestures
            touchActionNone: true,
            // instance id
            instanceId: null
        };
        if (typeof options == "object")
            defaultOptions = $.extend(defaultOptions, options);

        return this.each(function() {
            var opt = $.extend({}, defaultOptions);
            if (!opt.instanceId)
                opt.instanceId = "rsz_" + new Date().getTime();

            var startPos, startTransition;

            // get the element to resize 
            var $el = $(this);
            var $handle;

            if (options === "destroy") {
                opt = $el.data("resizable");
                if (!opt)
                    return;

                $handle = getHandle(opt.handleSelector, $el);
                $handle.off("mousedown." + opt.instanceId + " touchstart." + opt.instanceId);
                if (opt.touchActionNone)
                    $handle.css("touch-action", "");
                $el.removeClass("resizable");
                return;
            }

            $el.data("resizable", opt);

            // get the drag handle

            $handle = getHandle(opt.handleSelector, $el);

            if (opt.touchActionNone)
                $handle.css("touch-action", "none");

            $el.addClass("resizable");
            $handle.on("mousedown." + opt.instanceId + " touchstart." + opt.instanceId, startDragging);

            function noop(e) {
                e.stopPropagation();
                e.preventDefault();
            };

            function startDragging(e) {
                // Prevent dragging a ghost image in HTML5 / Firefox and maybe others    
                if (e.preventDefault) {
                    e.preventDefault();
                }

                startPos = getMousePos(e);
                startPos.width = parseInt($el.width(), 10);
                startPos.height = parseInt($el.height(), 10);

                startTransition = $el.css("transition");
                $el.css("transition", "none");

                if (opt.onDragStart) {
                    if (opt.onDragStart(e, $el, opt) === false)
                        return;
                }

                $(document).on("mousemove." + opt.instanceId, doDrag);
                $(document).on("mouseup." + opt.instanceId, stopDragging);
                if (window.Touch || navigator.maxTouchPoints) {
                    $(document).on("touchmove." + opt.instanceId, doDrag);
                    $(document).on("touchend." + opt.instanceId, stopDragging);
                }
                $(document).on("selectstart." + opt.instanceId, noop); // disable selection
                $("iframe").css("pointer-events", "none");
            }

            function doDrag(e) {

                var pos = getMousePos(e),
                    newWidth, newHeight;

                if (opt.resizeWidthFrom === "left")
                    newWidth = startPos.width - pos.x + startPos.x;
                else
                    newWidth = startPos.width + pos.x - startPos.x;

                if (opt.resizeHeightFrom === "top")
                    newHeight = startPos.height - pos.y + startPos.y;
                else
                    newHeight = startPos.height + pos.y - startPos.y;

                if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
                    if (opt.resizeHeight)
                        $el.height(newHeight);

                    if (opt.resizeWidth)
                        $el.width(newWidth);
                }
            }

            function stopDragging(e) {
                e.stopPropagation();
                e.preventDefault();

                $(document).off("mousemove." + opt.instanceId);
                $(document).off("mouseup." + opt.instanceId);

                if (window.Touch || navigator.maxTouchPoints) {
                    $(document).off("touchmove." + opt.instanceId);
                    $(document).off("touchend." + opt.instanceId);
                }
                $(document).off("selectstart." + opt.instanceId, noop);

                // reset changed values
                $el.css("transition", startTransition);
                $("iframe").css("pointer-events", "auto");

                if (opt.onDragEnd)
                    opt.onDragEnd(e, $el, opt);

                return false;
            }

            function getMousePos(e) {
                var pos = {
                    x: 0,
                    y: 0,
                    width: 0,
                    height: 0
                };
                if (typeof e.clientX === "number") {
                    pos.x = e.clientX;
                    pos.y = e.clientY;
                } else if (e.originalEvent.touches) {
                    pos.x = e.originalEvent.touches[0].clientX;
                    pos.y = e.originalEvent.touches[0].clientY;
                } else
                    return null;

                return pos;
            }

            function getHandle(selector, $el) {
                if (selector && selector.trim()[0] === ">") {
                    selector = selector.trim().replace(/^>\s*/, "");
                    return $el.find(selector);
                }

                // Search for the selector, but only in the parent element to limit the scope
                // This works for multiple objects on a page (using .class syntax most likely)
                // as long as each has a separate parent container. 
                return selector ? $el.parent().find(selector) : $el;
            }
        });
    };
}));



$(function() {
    //$("#top-left").css("height","100%");
});

$("#links").resizable({
    handleSelector: "#schiebeteil",
    resizeHeight: false,
    resizeWidthFrom: "right"
});

$("#rechts").resizable({
    handleSelector: "#schiebeteil",
    resizeHeight: false,
    resizeWidthFrom: "left"
});

$("#top-left").resizable({
    handleSelector: "#hori-drag",
    resizeWidth: false
});

$("#bottom-left").resizable({
    handleSelector: "#hori-drag",
    resizeWidth: false,
    resizeHeightFrom: "top"
});

$(".img-btn").on("click", function(e) {
    let fname = e.target.textContent;
    $("#main-image").attr("src", fname);
});

Answer 1

Вот ваше решение для точек останова 500px

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<link rel="stylesheet" href="style.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<article id="links">At vero eos et accusam et justo duo dolores et ea rebum. 
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed 
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
amet.
</article>
<div id="schiebeteil"></div>

<article id="rechts">

<section class="main-nav">
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')">All works</button>
<button class="btn" onclick="filterSelection('illustrations')">Illustrations</button>
<button class="btn" onclick="filterSelection('animations')">Animations</button>
</div>
</section>

<section class="image-content">

<div class="column illustrations">
<div class="content">
<img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg" >
<h4>Mountains</h4>
</div>
</div> 
 <div class="column illustrations">
  <div class="content">
   <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg" >
  <h4>Mountains</h4>
  </div>
  </div>
   <div class="column illustrations">
   <div class="content">
   <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg" >
  <h4>Mountains</h4>
  </div>
  </div> 
  <div class="column illustrations">
   <div class="content"><img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg" >   
   <h4>Mountains</h4>
   </div>
   </div> 
   <div class="column animations">
   <div class="content">
   <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg" >
   <h4>Mountains</h4>
   </div>
   </div> 
   </section>

   </article>


   <script src="jsresize.js"></script>
   <script>
   filterSelection("all")
   function filterSelection(c) {
     var x, i;
     x = document.getElementsByClassName("column");
     if (c == "all") c = "";
     for (i = 0; i < x.length; i++) {
       w3RemoveClass(x[i], "show");
       if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
     }
   }

   function w3AddClass(element, name) {
     var i, arr1, arr2;
     arr1 = element.className.split(" ");
     arr2 = name.split(" ");
     for (i = 0; i < arr2.length; i++) {
       if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
     }
   }

   function w3RemoveClass(element, name) {
     var i, arr1, arr2;
     arr1 = element.className.split(" ");
     arr2 = name.split(" ");
     for (i = 0; i < arr2.length; i++) {
       while (arr1.indexOf(arr2[i]) > -1) {
         arr1.splice(arr1.indexOf(arr2[i]), 1);     
       }
     }
     element.className = arr1.join(" ");
   }


   // Add active class to the current button (highlight it)
   var btnContainer = document.getElementById("myBtnContainer");
   var btns = btnContainer.getElementsByClassName("btn");
   for (var i = 0; i < btns.length; i++) {
     btns[i].addEventListener("click", function(){
       var current = document.getElementsByClassName("active");
       current[0].className = current[0].className.replace(" active", "");
       this.className += " active";
     });
   }
   </script>

   </body>

   </html>

CSS:

    * {
    font-family: Arial;
    font-size: 40px;
    box-sizing: border-box;
    font-weight: normal;
    }

    body {
    height: 100%;
    display: flex;
    background-color: #eee;
    }

    #links,
    #rechts {
    width: 100%;
    height: 100vh;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 20%;
    overflow-y: auto;
    }

    #schiebeteil {
    width: 3px;
    flex: 0 0 auto;
    cursor: col-resize;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    }

    /* Create three equal columns that floats next to each other */
    .column {
    float: left;
    width: 50%;
    display: none; /* Hide all elements by default */
    }

    #rechts.smallSize .column {width:100%;}

    /* Content */
    .content {
    padding: 10px;
    }

    /* The "show" class is added to the filtered elements */
    .show {
    display: block;
    }

    #myBtnContainer {
    margin:0 auto;
    height:100%;   
    margin: 0px;
    padding: 0px;
    }

    /* Style the buttons */
    .btn {
    border: none;
    outline: none;
    cursor: pointer;
    background: none;
    color: black;
    padding: 0;
    margin: 0;
    line-height: 96%;
    font-size: 18px;
    margin-right:20px;
    float:right;
    height:100%;
    }

    .btn:hover {
    }

    .btn.active {
    }

    img {
    width: 100%;
    }

    h4 {
    font-size: 18px;
    padding: 0;
    margin: 0;
    }

    .image-content {
    float: left;
    margin-left: 48px;
    }

    .main-nav {
    width:100vh;    
    height:45px;
    position:fixed;
    -webkit-transform-origin: left top;
    -webkit-transform:rotate(-90deg) translateX(-100%);
    }

Js:

   /// <reference path="../bower_components/jquery/dist/jquery.js" />
   /*
   jquery-resizable
   Version 0.32 - 5/5/2018
   © 2015-2018 Rick Strahl, West Wind Technologies
   www.west-wind.com
   Licensed under MIT License
   */
   (function(factory, undefined) {
       if (typeof define === "function" && define.amd) {
    // AMD
    define(["jquery"], factory);
       } else if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS
    module.exports = factory(require("jquery"));
} else {
    // Global jQuery
    factory(jQuery);
}
   }(function($, undefined) {

       if ($.fn.resizable)
     return;

       $.fn.resizable = function fnResizable(options) {
           var defaultOptions = {
        // selector for handle that starts dragging
        handleSelector: null,
        // resize the width
        resizeWidth: true,
        // resize the height
        resizeHeight: true,
        // the side that the width resizing is relative to
        resizeWidthFrom: "right",
        // the side that the height resizing is relative to
        resizeHeightFrom: "bottom",
        // hook into start drag operation (event passed)
        onDragStart: null,
        // hook into stop drag operation (event passed)
        onDragEnd: null,
        // hook into each drag operation (event passed)
        onDrag: null,
        // disable touch-action on $handle
        // prevents browser level actions like forward back gestures
        touchActionNone: true,
        // instance id
        instanceId: null
       };
      if (typeof options == "object")
        defaultOptions = $.extend(defaultOptions, options);

      return this.each(function () {
        var opt = $.extend({}, defaultOptions);
        if (!opt.instanceId)
            opt.instanceId = "rsz_" + new Date().getTime();            

        var startPos, startTransition;

        // get the element to resize 
        var $el = $(this);
        var $handle;

        if (options === "destroy") {            
            opt = $el.data("resizable");
            if (!opt)
                return;

            $handle = getHandle(opt.handleSelector, $el);
            $handle.off("mousedown." + opt.instanceId + " touchstart." + opt.instanceId);
            if (opt.touchActionNone)
                $handle.css("touch-action", "");
            $el.removeClass("resizable");
            return;
        }

        $el.data("resizable", opt);

        // get the drag handle

        $handle = getHandle(opt.handleSelector, $el);

        if (opt.touchActionNone)
            $handle.css("touch-action", "none");

        $el.addClass("resizable");
        $handle.on("mousedown." + opt.instanceId + " touchstart." + opt.instanceId, startDragging);

        function noop(e) {
            e.stopPropagation();
            e.preventDefault();
        };

        function startDragging(e) {
            // Prevent dragging a ghost image in HTML5 / Firefox and maybe others    
            if ( e.preventDefault ) {
              e.preventDefault();
            }

            startPos = getMousePos(e);
            startPos.width = parseInt($el.width(), 10);
            startPos.height = parseInt($el.height(), 10);

            startTransition = $el.css("transition");
            $el.css("transition", "none");

            if (opt.onDragStart) {
                if (opt.onDragStart(e, $el, opt) === false)
                    return;
            }

            $(document).on("mousemove." + opt.instanceId, doDrag);
            $(document).on("mouseup." + opt.instanceId, stopDragging);
            if (window.Touch || navigator.maxTouchPoints) {
                $(document).on("touchmove." + opt.instanceId, doDrag);
                $(document).on("touchend." + opt.instanceId, stopDragging);
            }
            $(document).on("selectstart." + opt.instanceId, noop); // disable selection
            $("iframe").css("pointer-events","none");
        }

        function doDrag(e) {

            var pos = getMousePos(e), newWidth, newHeight;

            if (opt.resizeWidthFrom === "left")
                newWidth = startPos.width - pos.x + startPos.x;
            else
                newWidth = startPos.width + pos.x - startPos.x;

            if (opt.resizeHeightFrom === "top")
                newHeight = startPos.height - pos.y + startPos.y;
            else
                newHeight = startPos.height + pos.y - startPos.y;

            if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
                if (opt.resizeHeight)
                    $el.height(newHeight);                    

                if (opt.resizeWidth)
                    $el.width(newWidth);                    
            }
        }

        function stopDragging(e) {
            e.stopPropagation();
            e.preventDefault();

            $(document).off("mousemove." + opt.instanceId);
            $(document).off("mouseup." + opt.instanceId);

            if (window.Touch || navigator.maxTouchPoints) {
                $(document).off("touchmove." + opt.instanceId);
                $(document).off("touchend." + opt.instanceId);
            }
            $(document).off("selectstart." + opt.instanceId, noop);                

            // reset changed values
            $el.css("transition", startTransition);
            $("iframe").css("pointer-events","auto");

            if (opt.onDragEnd)
                opt.onDragEnd(e, $el, opt);

            return false;
        }

        function getMousePos(e) {
            var pos = { x: 0, y: 0, width: 0, height: 0 };
            if (typeof e.clientX === "number") {
                pos.x = e.clientX;
                pos.y = e.clientY;
            } else if (e.originalEvent.touches) {
                pos.x = e.originalEvent.touches[0].clientX;
                pos.y = e.originalEvent.touches[0].clientY;
            } else
                return null;

            return pos;
        }

        function getHandle(selector, $el) {
            if (selector && selector.trim()[0] === ">") {
                selector = selector.trim().replace(/^>\s*/, "");
                return $el.find(selector);
            }

            // Search for the selector, but only in the parent element to limit the scope
            // This works for multiple objects on a page (using .class syntax most likely)
            // as long as each has a separate parent container. 
            return selector ? $el.parent().find(selector) : $el;
        } 
    });
   };
 }));



   $(function() {
  //$("#top-left").css("height","100%");
   });

   $("#links").resizable({
      handleSelector: "#schiebeteil",
      resizeHeight: false,
      resizeWidthFrom: "right"
   });

   $("#rechts").resizable({
      handleSelector: "#schiebeteil",
      resizeHeight: false,
      resizeWidthFrom: "left",
     onDrag: function (e, $el, newWidth, newHeight, opt) {
     var elWidth = $el.width();
     if(elWidth < 500){
         $el.addClass('smallSize');
     }else{
         $el.removeClass('smallSize');
     }
     console.log($el.width());


   }
   });

   $("#top-left").resizable({
      handleSelector: "#hori-drag",
      resizeWidth: false
   });

   $("#bottom-left").resizable({
      handleSelector: "#hori-drag",
      resizeWidth: false,
     resizeHeightFrom: "top"
   });

   $(".img-btn").on("click", function(e) {
       let fname = e.target.textContent;
       $("#main-image").attr("src",fname);
   });

посещениессылка код