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