Expand the image within the iron-image component

Within a div, I have an element: 

<div style="width:330px;"><iron-image src="image.png"></iron-image></div>
. The image is 315px wide and 237px tall. I want the image to expand to 330px in width to fit its container without breaking the aspect ratio.
I attempted the following:

iron-image {
    width:330px;
    height:auto;
}
iron-image img {
     width:330px;
     height:auto;
}


Also tried this:

<div style="width:330px;"><iron-image src="image.png" style="width:330px;height:auto"></iron-image></div>

How can I ensure that the <img ... > element within the <iron-image> stretches to 330px in width with automatic height?

htmlcssimagepolymerpolymer-1.0

Answer №1

I encountered a similar issue where the sizing attribute wasn't solving the problem for me. Since the img element inside iron-image was within shady DOM, I had to access it using ::content.

#imgWrapper {
    width: 330px;
}
iron-image {
    width:100%;
}
iron-image::content img {
    width: 100%;
}

Furthermore,

<div id="imgWrapper">
    <iron-image src="image.png"></iron-image>
</div>

To make ::content function in light dom (outside of a custom element), remember to include

<style is="custom-style">

I hope this information proves helpful!

Answer №2

I needed a solution for setting the width to 100% and height to auto. After some trial and error, I found a method that worked perfectly:

<template>
  <style is="custom-style" include="uvalib-theme">
    :host {
      display: block;
      width: 100%;
      height: auto;
    }
    iron-image {
      --iron-image-width: 100%;
    }
  </style>

  <iron-image width="100%" src="myimg"></iron-image>

Answer №3

I encountered a similar issue and came across paper-card. I found that it solved the problem efficiently:

<paper-card image="YOUR_IMAGE_URL_HERE">
  <div class="card-content">
     <img src="OR_HERE">
  </div>
</paper-card>

Answer №4

I needed to make some adjustments to the style of the "img" tag that is nested within the shadow DOM of the iron-image component.

To achieve this, I modified the styling using the following Dart code snippet:

querySelectorAll('img').forEach((Element img) {
img.setAttribute('style', 'width:330px;height:auto');
});

This snippet should be placed inside the PolymerElement's "attached" function as it will not work properly if placed in the "ready" function.

attached - This function is called after the element has been attached to the document.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

triggering php object on mouse hover

I'm currently working on creating a mouseover effect for my PHP elements within a store. My goal is to have a transparent div appear over the dynamically generated PHP sections. I have set it to display block mode to test its functionality and positio ...

phpcssonmouseover

Incorporate a website link into an isotope filter

My filter configuration is as follows: <ul class="filters filter-portfolio"> <li><a href="#" class="selected animated" data-animation="fadeInUp" data-filter="*">All</a></li> <li><a hre ...

jqueryhtmljquery-isotope

The alignment of Bootstrap table headers in a Vue.js component needs adjusting for better display

Is there a way to ensure proper alignment of headers and column bodies in my Vue.js DataGrid component when utilizing the vuedraggable package for column reordering? Below is the code snippet for my DataGrid.vue component: <template> <div class ...

htmlcssvue.jshtml-tablebootstrap-5

Applying a variety of elements to a single function

I am in the process of creating a mini-survey and I want the buttons to change color when clicked, but return to normal when another button is selected within the same question. Currently, clicking on a button turns it red while leaving the others clear. H ...

javascripthtmlcssfunction

Progress Bar Aligned in the Middle

I am having difficulty centering the percentage total within the colored progress bar. I have attempted placing the <p> tag in various <div> tags but haven't been able to figure it out. Can someone provide assistance? ...

javascriptcssposition

Grab images from clipboard, encountering blob Error

I'm having issues with copying and pasting images from the clipboard in Chrome. Can someone help me troubleshoot this error? Check out this js fiddle for reference Error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileR ...

javascriptjqueryhtmlclipboard

What is the best approach to implement pagination in the UI-Bootstrap Typeahead Directive?

In my current Angular Project, I am utilizing the UI-Bootstrap's Typeahead Directive for a specific purpose. However, I am encountering an issue when dealing with a large amount of similar data using this directive. It seems that displaying only the ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

Is there a way to get Axios to display CSS on the page?

While working on a Web Viewer project with axios for web scraping practice, I encountered an issue where the CSS wasn't loading properly. Here is the code snippet I used: console.log("Tribble-Webviewer is starting!") const express = requir ...

javascriptcssexpressaxios

Improving the method for adding an element to an HTML document with jQuery

What is the best way to add this element to a specific DIV Class using JQUERY in an optimized manner? The elements are generated dynamically and I want to use .AppendTo to display them inside <div class='parent-list-workorder'>. This is wh ...

javascriptjqueryhtmlcssajax

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Currently, I have a situation where content is revealed after the callback function of a .js library (typed.js) executes. Here is the script I am using: Javascript $(function(){ $("#logo-black").typed({ strings: ["Nothing^450&Co^250.^500" ...

javascriptjqueryhtmlcssajax

When the Image Icon is clicked, the icon itself should become clickable and trigger the opening of a popup Dialogue Box for uploading a new image

When I click on the image icon, it should be clickable and a popup dialogue box will open to upload a new image. Check out this sample image for reference. Any help on this would be greatly appreciated. Thanks in advance. <div class="d-flex align-ite ...

htmlcssangular

Cannot Display CSS Background Image Locally

Apologies for the simple inquiry, but I am facing an issue with displaying my background image using background-image:url() in the CSS. Strangely, it does not work with this method, but when I use content:url(); it works just fine. Interestingly, backgrou ...

javascripthtmlcss

bootstrap navigation bar collapsible menu

Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frust ...

javascripthtmlcss

What is a way to increase the boldness of an HTML anchor tag when hovering without using CSS, but by modifying the inline style?

Is it possible to make the following anchor tags appear bolder on hover using inline styles, without utilizing any external or embedded CSS file? <a href="https://en.wikipedia.org/wiki/Internet_of_Things" target="_blank">Internet of things<br& ...

htmlhover

I'm curious about the specific sequence of CSS properties order recommended by Stylelint. Where can I locate

With Stylelint's CSS order option enabled, I'm having trouble getting Visual Studio Code to display the errors. Where can I locate the declaration/property order being used? Below is a snippet of my .stylelintrc.js configuration file: module.exp ...

cssnpmsassstylelint

How can I align text to the right in a navbar using Bootstrap 5?

My current navbar setup is as follows: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <div class="collapse navbar-collapse" id="navbarText"> ...

htmlbootstrap-5

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this: <div> <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /> </div> My goal is to show a different image based on the screen si ...

javascripthtmlcss

Loading screen displayed while transitioning between routes within Angular

I have been struggling to implement a loading spinner in my project. How can I display a loading screen when changing routes in Angular? Here is the HTML code snippet: <div *ngIf="showLoadingIndicator" class="spinner"></div> ...

cssangulartypescript

Is a Text-Only View Possible with WebView?

Could someone help me figure out how to restrict a WebView to only load text in my WinRT XAML App? I am looking for a simpler solution than having to download the source and manually editing img tags. ...

htmlxamltextwebviewwindows-runtime

Unable to move cursor in contenteditable section

I am currently working on developing a rich text editor in React, but I have encountered an issue that has me stuck. The problem I am facing is that as I type each character, the insertion point does not update accordingly, causing the cursor to remain stu ...

javascripthtmlcssreactjs