{"id":592,"date":"2017-12-01T19:59:36","date_gmt":"2017-12-01T18:59:36","guid":{"rendered":"https:\/\/a-vista-studios.de\/blog\/?p=592"},"modified":"2017-11-14T12:19:58","modified_gmt":"2017-11-14T11:19:58","slug":"texte-proportional-mit-bildern-skalieren","status":"publish","type":"post","link":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/","title":{"rendered":"Texte proportional mit Bildern skalieren"},"content":{"rendered":"<h3>Texte proportional mit Bildern skalieren. \u00c4ndert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.<\/h3>\n<p>Texte proportional mit Bildern skalieren: Die Bildgr\u00f6\u00dfe in Abh\u00e4ngigkeit vom zur Verf\u00fcgung stehenden Platz anzupassen geh\u00f6rt zu den Grundlagen responsiver Websites. Umgesetzt wird das mit wenigen Zeilen CSS-Code.<\/p>\n<p>Gibt es jedoch innerhalb des Bildes auch Textinhalte, dann haben statische Schrift-Gr\u00f6\u00dfenangaben wie <em>px<\/em> oder <em>em<\/em> zur Folge, dass die Textgr\u00f6\u00dfe konstant bleibt, w\u00e4hrend das Bild proportional zur Browserfensterbreite bzw. zum Viewport skaliert wird.<\/p>\n<p><strong>Dadurch k\u00f6nnen zwei Probleme entstehen:<\/strong><\/p>\n<ol>\n<li>Oft weisen Bildhintergr\u00fcnde keine einheitliche Helligkeit auf. Sie sind in einigen Bereichen hell, in anderen dunkel. Im Zug der Bildskalierung \u00e4ndert sich h\u00e4ufig auch die Lesbarkeit des Textes, wenn sich die Gr\u00f6\u00dfe des Hintergrundbildes reduziert, die Textgr\u00f6\u00dfe jedoch konstant bleibt.<br \/>\n<hr \/>\n<p>Zur Veranschaulichung:<\/p>\n<p><img title=\"Texte mit Bildern skalieren\" src=\"\/blog\/wp-content\/uploads\/redaktion\/anleitungen\/img_texte_mit_bildern_skalieren_700x320px.png\" alt=\"Texte mit Bildern skalieren\" \/><\/li>\n<li>Reduziert sich der zur Verf\u00fcgung stehende Platz, so kommt es zu Textumbr\u00fcchen. Dadurch kann das gew\u00fcnschte Design aus Text und Bild gegebenenfalls nicht aufrecht erhalten werden.<\/li>\n<\/ol>\n<p>Manche Webdesigner behelfen sich damit, die Texte in Photoshop direkt ins Bild zu integrieren und so das Skalierungsproblem zu umschiffen. Aus Gr\u00fcnden der Suchmaschinenoptimierung ist ein solches Vorgehen aber meist unerw\u00fcnscht. Zudem ist die \u00c4nderung der Texte verh\u00e4ltnism\u00e4\u00dfig aufwendig, da daf\u00fcr ein neues Bild erstellt und eingebaut werden muss.<\/p>\n<h2>Texte proportional mit Bildern skalieren<\/h2>\n<p>Mittels der Einheiten <em>vw<\/em> (= Viewport Width) beziehungsweise<em> vh<\/em> (= Viewport Height) lassen sich Text proportional mit Bildern skalieren. Indem die Schriftgr\u00f6\u00dfe mit der Einheit vw definiert wird, erfolgt proportional zur Gr\u00f6\u00dfe des Viewports eine Textvergr\u00f6\u00dferung bzw. Textverkleinerung.<\/p>\n<p>Die Einheiten lassen sich auch auf andere Elemente wie padding anwenden.<\/p>\n<a target=\"_blank\" class=\"standard-btn blue-btn\" href=\"https:\/\/a-vista-studios.de\/blog\/webdesign-demos\/texte-proportional-skalieren.html\"><span>BEISPIEL ANSEHEN<\/span><\/a>\n<pre class=\"font-size:14 lang:xhtml decode:true\">&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;meta name=description content=\"\"&gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n  &lt;title&gt;Texte proportional skalieren - Beispiel ansehen&lt;\/title&gt;\r\n\r\n  &lt;style&gt;\r\n    body {\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n    .wrapper {\r\n      position: relative;\r\n    }\r\n\r\n    img {\r\n      width: 100%;\r\n      height: auto;\r\n    }\r\n\r\n    #text-content {\r\n      font-family: verdana, arial, helvetica sans-serif;\r\n      color: #fff;\r\n      position: absolute;\r\n      top:0;\r\n      left:0;\r\n      right:0;\r\n      bottom: 0;\r\n      padding:3vw;\r\n    }\r\n\r\n    h1 {\r\n      font-size:4.5vw;\r\n      font-weight: normal;\r\n    }\r\n\r\n    p {\r\n      font-size:3vw;\r\n    }\r\n\r\n    .button {\r\n      margin-top: 15vw;\r\n    }\r\n\r\n    .button a {\r\n      display: inline;\r\n      font-size:2.5vw;\r\n      color: #fff;\r\n      background: rgba(255,255,255,0.2);\r\n      text-decoration: none;\r\n      border: 0.25vw solid #fff;\r\n      padding: 0.4em;\r\n    }\r\n\r\n    .button a:hover {\r\n      color: #464a52;\r\n      background: rgba(255,255,255,0.7);\r\n     }\r\n  &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n  &lt;div class=\"wrapper\"&gt;\r\n    &lt;img src=\"img_bg_avs_sunset_4322.jpg\" alt=\"\" title=\"\"&gt;\r\n    &lt;div id=\"text-content\"&gt;\r\n      &lt;h1&gt;Sunset | &lt;strong&gt;Sonnenuntergang&lt;\/strong&gt;&lt;\/h1&gt;\r\n      &lt;p&gt;Die sch\u00f6nste Stunde.&lt;\/p&gt;\r\n      &lt;div class=\"button\"&gt;&lt;a href=\"#\"&gt;Zur Sonne&lt;\/a&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><em>Stichworte: Texte proportional mit Bildern skalieren<\/em><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom kksr-disabled\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;592&quot;,&quot;readonly&quot;:&quot;1&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;0\\\/5 - (0 votes)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;Texte proportional mit Bildern skalieren&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\"><\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Texte proportional mit Bildern skalieren. \u00c4ndert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert. Texte proportional&hellip;<\/p>\n","protected":false},"author":2,"featured_media":598,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,17],"tags":[],"class_list":["post-592","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-webdesign"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Texte proportional mit Bildern skalieren \u2013 Responsive Design<\/title>\n<meta name=\"description\" content=\"Texte proportional mit Bildern skalieren. \u00c4ndert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Texte proportional mit Bildern skalieren \u2013 Responsive Design\" \/>\n<meta property=\"og:description\" content=\"Texte proportional mit Bildern skalieren. \u00c4ndert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/\" \/>\n<meta property=\"og:site_name\" content=\"Webdesign Tipps \/ Webdesign Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-01T18:59:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/12\/img_texte_proportional_mit_bildern_skalieren.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"avs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"avs\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/\"},\"author\":{\"name\":\"avs\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f\"},\"headline\":\"Texte proportional mit Bildern skalieren\",\"datePublished\":\"2017-12-01T18:59:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/\"},\"wordCount\":309,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/12\/img_texte_proportional_mit_bildern_skalieren.jpg\",\"articleSection\":[\"HTML\",\"Webdesign\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/\",\"name\":\"Texte proportional mit Bildern skalieren \u2013 Responsive Design\",\"isPartOf\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/12\/img_texte_proportional_mit_bildern_skalieren.jpg\",\"datePublished\":\"2017-12-01T18:59:36+00:00\",\"description\":\"Texte proportional mit Bildern skalieren. \u00c4ndert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.\",\"breadcrumb\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#primaryimage\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/12\/img_texte_proportional_mit_bildern_skalieren.jpg\",\"contentUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/12\/img_texte_proportional_mit_bildern_skalieren.jpg\",\"width\":1440,\"height\":530,\"caption\":\"Texte proportional mit Bildern skalieren\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/a-vista-studios.de\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Texte proportional mit Bildern skalieren\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#website\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/\",\"name\":\"Webdesign Tipps \/ Webdesign Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/a-vista-studios.de\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#organization\",\"name\":\"A Vista Studios\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png\",\"contentUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png\",\"width\":520,\"height\":236,\"caption\":\"A Vista Studios\"},\"image\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f\",\"name\":\"avs\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g\",\"caption\":\"avs\"},\"url\":\"https:\/\/a-vista-studios.de\/blog\/author\/avs\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Texte proportional mit Bildern skalieren \u2013 Responsive Design","description":"Texte proportional mit Bildern skalieren. \u00c4ndert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/","og_locale":"de_DE","og_type":"article","og_title":"Texte proportional mit Bildern skalieren \u2013 Responsive Design","og_description":"Texte proportional mit Bildern skalieren. \u00c4ndert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.","og_url":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/","og_site_name":"Webdesign Tipps \/ Webdesign Blog","article_published_time":"2017-12-01T18:59:36+00:00","og_image":[{"width":1440,"height":530,"url":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/12\/img_texte_proportional_mit_bildern_skalieren.jpg","type":"image\/jpeg"}],"author":"avs","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"avs","Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#article","isPartOf":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/"},"author":{"name":"avs","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f"},"headline":"Texte proportional mit Bildern skalieren","datePublished":"2017-12-01T18:59:36+00:00","mainEntityOfPage":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/"},"wordCount":309,"commentCount":0,"publisher":{"@id":"https:\/\/a-vista-studios.de\/blog\/#organization"},"image":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#primaryimage"},"thumbnailUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/12\/img_texte_proportional_mit_bildern_skalieren.jpg","articleSection":["HTML","Webdesign"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/","url":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/","name":"Texte proportional mit Bildern skalieren \u2013 Responsive Design","isPartOf":{"@id":"https:\/\/a-vista-studios.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#primaryimage"},"image":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#primaryimage"},"thumbnailUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/12\/img_texte_proportional_mit_bildern_skalieren.jpg","datePublished":"2017-12-01T18:59:36+00:00","description":"Texte proportional mit Bildern skalieren. \u00c4ndert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.","breadcrumb":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#primaryimage","url":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/12\/img_texte_proportional_mit_bildern_skalieren.jpg","contentUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/12\/img_texte_proportional_mit_bildern_skalieren.jpg","width":1440,"height":530,"caption":"Texte proportional mit Bildern skalieren"},{"@type":"BreadcrumbList","@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/texte-proportional-mit-bildern-skalieren\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/a-vista-studios.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Texte proportional mit Bildern skalieren"}]},{"@type":"WebSite","@id":"https:\/\/a-vista-studios.de\/blog\/#website","url":"https:\/\/a-vista-studios.de\/blog\/","name":"Webdesign Tipps \/ Webdesign Blog","description":"","publisher":{"@id":"https:\/\/a-vista-studios.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/a-vista-studios.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/a-vista-studios.de\/blog\/#organization","name":"A Vista Studios","url":"https:\/\/a-vista-studios.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png","contentUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png","width":520,"height":236,"caption":"A Vista Studios"},"image":{"@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f","name":"avs","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g","caption":"avs"},"url":"https:\/\/a-vista-studios.de\/blog\/author\/avs\/"}]}},"_links":{"self":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts\/592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/comments?post=592"}],"version-history":[{"count":7,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts\/592\/revisions"}],"predecessor-version":[{"id":677,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts\/592\/revisions\/677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/media\/598"}],"wp:attachment":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/media?parent=592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/categories?post=592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/tags?post=592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}