Struggling to adjust the width of an <img> tag to fit the screen within a UITextView/HTML using NSAttributedString

When I try to load HTML with images into a UITextView, the images do not want to fit the width of the screen, they appear too large. Setting the width attribute for the IMG tag and using CSS does not seem to help.

Here is the code snippet:

var content = "<html><head><meta charset='utf-8'><title>«Первый поворот налево или направо?» Secrets of Lewis Hamilton's success</title><style>img {max-width: '100%'; width: '100%'; height: auto;}body{ color:red }</style></head><body><p>Sometimes his superiority is immediately noticeable - as with the breathtaking speed of entering the first turn at this year's Australian Grand Prix, and sometimes it is not so obvious.</p><p><img src='http://autosport.com.ru/files/feature/2018/06/29/ba7222d642a69863db32ec8e5d2e8b8f.jpg' alt='Lewis Hamilton © autosport.com'/>Lewis Hamilton</p>"
        let htmlData = NSString(string: content).data(using: String.Encoding.unicode.rawValue)
        let options = [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html]
        let attributedString = try! NSAttributedString(data: htmlData!, options: options, documentAttributes: nil)
        txtView.attributedText = attributedString

Answer №1

Implementing CSS properties max-width, max-height, width, height with a value of 100% was the solution that worked best for me.

let webContent: String = "<!DOCTYPE html><html>" +
    "<head>" +
    "<meta charset='UTF-8'>" +
    "<style type='text/css'>" +
    "body {" +
    "margin: 0;" +
    "padding: 0;" +
    "}" +
    "img{" +
        "max-width: 100%;" +
        "max-height: 100%;" +
        "width: 100%;" +
        "height: 100%;" +
    "}" +
    "</style>" +
    "</head>" +
    "<body></body></html>"

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

Display the Angular UI grid containing data from the textboxes once the information has been submitted

I recently started working on an angularjs application and I am facing some challenges in finding the solution. Any advice or suggestions would be greatly appreciated. My goal is to dynamically display an angular UI-grid based on the text selected in the ...

Using either the <h1> or <p> tag within my <div> element disrupts the entire layout

Whenever I add a heading tag or paragraph tag within my div, it causes the content to drop down the screen significantly. I am unsure of the cause and feel a bit overwhelmed by it. I attempted to wrap the <h1> tag in a <div>, as shown below: & ...

What is the best way to create rounded corners on a WordPress login page?

I recently implemented the Custom Login Page Customizer plugin on my WordPress website and it has created a beautiful login page. While I was able to round the corners of my logo using CSS, I'm struggling to achieve the same effect on the login form. ...

Tips for retrieving specific database entries using a JavaScript function

I'm currently in the process of developing a web directory that showcases organizations based on the selected county by utilizing an XML database. During testing, I have configured it to only display organization names and counties for now. However, ...

Creating a sticky popup feature for your Chrome extension

Just starting out with chrome extensions and looking to create one that appends an external class to a selected tag. For example, let's say we have the following tag: <h1>extension</h1> When the user clicks on this element, I want to ad ...

Dynamic stylesheet in Vue component

Currently, I am utilizing a Vue component (cli .vue) and facing the challenge of selectively displaying my stylesheet based on a boolean value. To put it simply: When myVar==false, the component should not load its styles. <style v-if="myVar" lang="sc ...

Having trouble with your jQuery slideDown menu?

I am facing the exact same issue I had last week. Here is an example of my HTML code: <article class="tickets"> <div class="grid_12 left"> <div class="header"> <i class="ico ...

Login effortlessly using Swift with Facebook authentication

Hey there! I need some assistance in translating the following code snippet from Objective C to the newer Swift programming language. If anyone is well-versed in both languages, I would greatly appreciate it if you could help me out by pointing out the dif ...

Prevent Child Elements from Overstretching Container with Bootstrap Flex

I'm working on a layout where all elements can be viewed without the need for scrolling. Any panels that require more space should be scrollable. In the following example, I want the contents of main-left to be scrollable without stretching the entire ...

Can the z-index of a div be altered by a checked checkbox?

I've been trying to figure out how to make a PayPal button only clickable after the user confirms the Terms of Service. My idea is to place another div over the PayPal button with an unchecked checkbox, opacity, and z-index. When the user checks the c ...

Implement consistent styling across several elements within a component

const GreenRow = styled.div` background-color: green; ` const RedRow = styled.div` background-color: red; ` const YellowRow = styled.div` background-color: yellow; ` const GreyRow = styled.div` background-color: grey; ` const MyComponent = () => ...

Creating responsive divs on my webpage

Although I have browsed through various posts with similar questions, none of the solutions seem to work for me. I will make sure to include all relevant information related to my issue and explain why I am unable to resolve it on my own. Currently, I am ...

Element was removed upon clicking only once

Can anyone help me figure out why the behavior of .remove() with $postNav.remove(); is different here? When you click on "I'm a tag" for the first time, both the <li> and <ol> are deleted as expected. However, on the second click, only the ...

Is there a simpler method to access the source element for an event?

I'm just starting to learn JavaScript and jQuery, and right now I have the following code in my HTML: <a id="tog_table0" href="javascript:toggle_table('#tog_table0', '#hideable_table0');">show</a> After that, I hav ...

Preventing overlapping of a "position-fixed" element with variable size: Effective strategies

I am trying to keep a fixed element visible at the top of the page while also having content with varying heights. Here is the CSS code for the fixed element: div.topfloat { position: fixed; top: 0; width: 100%; } The issue I'm facing is ...

Implementing functionality to an object in UITabBar within UITabBarController

I developed an iOS application using Xcode and Swift. The app consists of multiple UIViewControllers managed by a single UITabBarController with a UITabBar for switching between the different ViewControllers. Is there a method to incorporate an action for ...

Explore iTunes to find a podcast by its title

I am searching for the podcast episode titled "#1: The Single White Guy Focus Group." I have tried using the iTunes search API with the following link: However, it returns an empty JSON. I also attempted these links: ... and ... Yet I always receive the ...

looping through the iteration

Here is a link to my original plunker demonstration: http://plnkr.co/edit/9UBZ9E4uxAo1TXXghm1T?p=preview. In the case of div 4 (ng-if="show==4"), I am looking for a way to hide the particular div when the list is empty. Currently, each div is displayed fo ...

Conceal the current table and reveal a new table upon clicking using jQuery

Within my form, there is an option to select a specific type. Depending on the chosen type, relevant data is displayed in a table. Upon selecting the first type and clicking the submit button, the data is correctly shown in the table. However, when selec ...

The rendering of HTML DOM is being obstructed on iPhone devices running iOS 13

Currently, I'm developing a web-based URL stream music player using JavaScript. The player functions smoothly on Android devices, but I'm encountering an issue with DOM rendering being blocked on iPhone devices. Despite rearranging the JavaScript ...