#

 

 

Ein Problem in Webseiten ist immer, dass beim Verkleinern der Browser-Größe die eingetteten Bilder über den Rahmen schauen können.

Wie kann man Bilder in einer HTML Webseite automatisch verkleinern, wenn sich die Seite verkleinert ?

 

Mit CSS und HTML ist das direkt möglich wenn man die richtigen Einstellungen wählt.

 

Lösung:

Man muss das Image in einen Div-Container einbetten.

Dann gibt man dem Container eine CSS Klasse und definiert alle Images Innerhalb dieser CSS-Klasse mit max-Width:100% und heigth:auto

 

Beispiel:

Hier ist ein Bild eingebettet, das sehr breit ist.

Der umfassende Div-Container hat die CSS-Klasse: divMain

<div id="divMain" class="divMain">

    <img width="720" height="395" src=" /Image_11_0.jpg" >

</div>

 

In dem Style-Tag oder CSS-Sheet wird nun die .divMain Klasse definiert und anschliessend alle Images in dem Container mit .divMain img{..}

.divMain {

width: 80%;

overflow-wrap: break-word;

overflow: auto;

}

 

/* resize images */

.divMain img {

max-width: 100%;

height: auto;

}

 

 

Darstellung im Browser bei verkleinertem Browser-Client.

Die Breite und Höhe des Images wurde ebenfalls verkleinert.

 

Getestet mit Google Chrome, Firefox, Edge und Opera

 

 

@model IWois_Core.Models.Notes_Detail_DataModel

 

@{

    ViewData["Title"] = "Details";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

<style>

    .divMain {

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        flex-direction: column;

        vertical-align: top;

        display: inline-block;

        width: 80%;

        /*max-width: 80%;*/

        overflow-wrap: break-word;

        overflow: auto;

        margin: 0;

        padding: 0px;

        background-color: rgba(250, 250, 250, 0.7);

    }

 

        /* resize images */

        .divMain img {

            max-width: 100%;

            height: auto;

        }

 

        .divRight {

        display: block;

        float:right;

        margin: 0;

        padding: 0px;

        background-color: rgba(235, 235, 235, 0.74);

    }

    td  {

        max-width:600px;

 

    }

</style>

 

 

 

@*--------< divMain >--------*@

<div id="divMain" class="divMain">

    <h1>@Html.DisplayFor(model => model.Note.Title)</h1>

    <div id="divContent" style="background-color:white; padding:10px;">@Html.Raw(Model.Note.HTML)</div>

</div>

 

@*--------</ TdivMain >--------*@

 

 

@*--------< DivRight >--------*@

<div id="divRight" class="divRight">

    @*--< Date >--*@

    <div id="divDate_Edit">

        d:@Html.DisplayFor(model => model.Note.DtEdit)

        v:@Html.DisplayFor(model => model.Note.sumViews)

    </div>

    @*--< Date >--*@

 

    @*----< User >----*@

    <div id="divUser">

        @{ if (Model.has_Profil_Image)

            {

                <img src="~/User_Files/User_Images/80/User_Image_1.jpg" style="border-radius:50%" />

            }

        }

        <br />@Model.Username

        <br />Views: @Model.User_Content_Views

    </div>

    @*----</ User >----*@

 

 

</div>

@*--------</ DivRight >--------*@

 

 

 

 

 

@{ if (Model.Is_Own)

    {

        <a href="~/Notes/Edit/@Model.Note.IDNote" title="Edit" class="btn btn-default" style="font-size:large; text-decoration:none;">Edit</a>

 

    }

}

 

 

 

Referenz zu Problem:

changing image sizes proportionally using css

css how can i set image size relative to parent height

how do i auto resize an image to fit a div container

Mobile

.

0123movie.net